/* Header style */
.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;}
.sync-bd-icon {background: url(../images/brilliant-directories-logo.svg) no-repeat center center;  width: 126px; height: 49px; background-size: 100%;}

#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;}

.swc-bd-nav.nav-tab-wrapper .nav-tab-active { background-color: #fff; border-bottom: 1px solid #ffffff; position: relative; z-index: 1;}
.swp-bd-wrapper .swc-bd-nav, .swc-bd-wrapper .swc-bd-nav{border-bottom: none !important;}

.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-general-configuration-wrap{ background-color: #fff; padding: 30px; border: 1px solid #c3c4c7; top: 0px; position: relative; }
.bd-two-coloumn-wrap { display: flex; gap: 20px; margin-right: 20px; }
.bd-general-configuration-wrap{width: 60%;}
.sync-bd-title-wrap h2 { margin:0px; background: #f0f0f1; padding: 10px; }
.sync-bd-title-wrap {background: #f0f0f1; margin: 0 0 15px;}
.bd-video-container { width: 40%; background: #fff; border: 1px solid #c3c4c7; display: flex; }
.bd-video-container iframe { width: 100%; height: 100%; }
.bd-form-container{width: 65%; 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-section {padding-bottom: 40px;margin: 0;}
p.description.brill-api-note{margin-bottom: 15px;}

.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;}
.bd-form-container form p.description { margin: 5px 0 5px; color: #646970; font-size: .95em; }
.api-btn-wrapper{display: flex ; align-items: center; gap: 10px;}

.brillforms-error-msg{ font-size: 14px; color: rgb(214, 54, 56); line-height: 1.25em;}
.brillforms-success-msg{ font-size: 14px; color: rgb(0, 128, 0); line-height: 1.25em;}

@keyframes brillspin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.brill-spin-icon { display: inline-block; animation: brillspin 2s linear infinite; }

/* plugin enable/disable switch styles */ 
.brill_yes_or_no_switch .brill_container_checkbox input { display: none !important; }
.brill_yes_or_no_switch .brill_container_checkbox label { display: inline-block; width: 70px; height: 32px; background: #455a64; border-radius: 30px; position: relative; cursor: pointer; }
.brill_yes_or_no_switch .brill_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); }
.brill_yes_or_no_switch .brill_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; }
.brill_yes_or_no_switch .brill_container_checkbox input:checked ~ label { background: #2196F3; transition: .3s; }
.brill_yes_or_no_switch .brill_container_checkbox input:checked ~ label:before { transform: translate(36px, 0); transition: .3s; }
.brill_yes_or_no_switch .brill_container_checkbox input:checked ~ label:after { content: "ON"; text-align: left; left: 4px; top: 7px; }

/* Tooltip icon styles */ 
.brillforms-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: 4px; float: right;} 
.brillforms-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; }
.brillforms-tooltip-text::after { content: ""; position: absolute; top: 100%; left: 45%; border-width: 7px; border-style: solid; border-color: #333 transparent transparent transparent; }
.brillforms-tooltip-icon:hover .brillforms-tooltip-text { visibility: visible; opacity: 1; transition-delay: 0s; }

/* Tooltip icon styles for Sync form*/ 
.brillforms-add-sync-wrap .brillforms-tooltip-icon{float: left; top: 2px; margin-right: 5px;}
.brillforms-add-sync-wrap .brillforms-tooltip-text{margin-left: -20px;}
.brillforms-add-sync-wrap .brillforms-tooltip-text::after{left: 4%;}

/* sync form styles */
.brillforms-add-sync-wrap{ border: 1px solid #c3c4c7; box-shadow: 0 1px 1px rgba(0, 0, 0, .04); background: #fff; padding: 12px 12px; margin: 10px 0 0; }
.brillforms-add-sync-wrap .brill-single-select select{max-width: 100%; width: 100%;}
.brill-field-wrap{display: flex; flex-direction: column; margin-bottom: 20px;}
.brillforms-mapping-wrap .brill-label-wrap{ margin-bottom: 10px;}
#brillforms_fields_wrap{margin: 20px 0px;}
.brill-label{color: #000; font-size: 14px; font-weight: 600;}
.brill-field-wrap label{ color: #000; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.brill-note-txt{ margin: 5px 0 5px; color: #646970; font-size: .95em; }
.brill-note-txt strong{color: #000;}
#brill_create_option_wrap{margin-bottom: 0px;}
.bril-required-msg{color: rgb(214, 54, 56);}
.brillforms-mapping-wrap .select2-container--default .select2-selection--single .select2-selection__rendered, .brill-additional-field-row .select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 24px;}

 /* Custom Dropdown Styling */
.brillforms-custom-dropdown { width: 300px; position: relative; }
.brillforms-custom-dropdown select { width: 100%; padding: 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; background-color: white; }

/* Custom Option Input for Adding Options inside the dropdown */
.brillforms-custom-dropdown .select2-results__options { max-height: 200px; overflow-y: auto; }
.brill-custom-option-container { padding: 10px; background-color: #fff; display: flex; justify-content: center; align-items: center; gap: 10px; align-items: center; border: 1px solid #ccc; }
.brill-custom-option-container input { padding: 0px 8px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; width: 80%; }
.brill-custom-option-container button { padding: 6px 12px; background-color: #007bff; color: white; border: none; cursor: pointer; font-size: 14px; border-radius: 4px; }
.brill-custom-option-container button:hover { background-color: #0056b3; }

/* mapping fields section style */
.brillforms-field-map-table{margin-bottom: 20px;}

/* additional mapping field styel */
.brill-additional-field-row{width: 100%; margin-top: 10px; display: flex; align-items: center; gap: 10px;}
.brill-additional-field-input, .brill-additional-field-select{width: 50%;}
.brill-additional-field-input input{width: 100%; min-height: 28px; height: 28px;}
.brill-additional-field-row .brill-del-custom-field{color: rgb(214, 54, 56); cursor: pointer;}

.brillforms-field-map-table{width: 100%;}
.brillforms-field-map-table thead tr th.brill-form-datas {width: 25%;}
.brillforms-field-map-table thead tr th.brill-mapping-datas {width: 50%;}
.brillforms-field-map-table .brill-mapping-data-wrap{display: flex; justify-content: space-between;}
#requiredFieldsCount{font-weight: bold;color: #fff; padding: 2px 10px; font-size: 11px; border-radius: 3px;}
li[aria-label="Required Mapping Fields"] > strong.select2-results__group {color: rgb(214, 54, 56);}
.brill-additional-field-select .select2-container--default .select2-selection--single .select2-selection__clear, .brillforms-mapping-wrap .select2-container--default .select2-selection--single .select2-selection__clear{color: rgb(214, 54, 56);line-height:25px;padding:0 5px;margin:0 5px}
/* all sync page style */
/* plugin enable/disable switch styles - SMALLER VERSION */
.brill_status_wrap .brill_yes_or_no_switch .brill_container_checkbox input { display: none !important; }
.brill_status_wrap .brill_yes_or_no_switch .brill_container_checkbox label { display: inline-block; width: 45px; height: 20px; background: #455a64; border-radius: 20px; position: relative; cursor: pointer; }
.brill_status_wrap .brill_yes_or_no_switch .brill_container_checkbox label::before { content: "" !important; position: absolute; width: 16px; height: 16px; background: #fff !important; border-radius: 50% !important; top: 2px; left: 2px; transition: .3s !important; box-shadow: -2px 0 2px rgba(0, 0, 0, .1); }
.brill_status_wrap .brill_yes_or_no_switch .brill_container_checkbox label::after { content: "OFF"; position: absolute; color: #fff; font-size: 10px; font-weight: 600; width: 100%; left: -2px; top: 1px; text-align: right; padding: 0 4px; box-sizing: border-box; }
.brill_status_wrap .brill_yes_or_no_switch .brill_container_checkbox input:checked ~ label { background: #2196F3; transition: .3s; }
.brill_status_wrap .brill_yes_or_no_switch .brill_container_checkbox input:checked ~ label:before { transform: translate(24px, 0); transition: .3s; }
.brill_status_wrap .brill_yes_or_no_switch .brill_container_checkbox input:checked ~ label:after { content: "ON"; text-align: left; left: 2px; top: 1px; }

/* error log section style */
.brill-log-clear{padding: 10px;}
.brill-log-clear span{color: rgb(214, 54, 56); text-decoration: underline;cursor: pointer; border: none; background-color: unset;}
.brill-log-clear span:hover{text-decoration: none;}
.brill-Pagination-wrap{margin-top: 20px; text-align: right;}
.brill-Pagination-wrap ul.page-numbers { display: inline-flex; gap: 5px; list-style: none; padding: 0; margin: 0; overflow: hidden; }
.brill-Pagination-wrap ul.page-numbers li { display: inline; margin-bottom: 0; }
.brill-Pagination-wrap ul.page-numbers li a, .brill-Pagination-wrap ul.page-numbers li span { display: inline-block; padding: 5px 8px; color: #0073aa; text-decoration: none; }
.brill-Pagination-wrap ul.page-numbers li a:hover { background-color: #0073aa; color: #fff; }
.brill-Pagination-wrap ul.page-numbers li .current { background-color: #0073aa; color: #fff; }
.brillforms-error-log table{width: 100%; border-collapse: collapse;}
.brillforms-error-log table tr th{border: 1px solid #ddd; padding: 8px;background-color: #f2f2f2; text-align: left;}
.brillforms-error-log table tr td{border: 1px solid #ddd; padding: 8px;}
.brill-clear-log-wrap {display: flex; align-items: center; justify-content: space-between;}

/* popup style */
.brill-popup-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 1000; }
.brill-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); }
.brill-modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 30px; background-color: white; border-radius: 8px; text-align: center; z-index: 1001; }
.brill-modal-content button { margin: 10px; }
.brill-modal-content h3{ margin-top: 0px; }
.brill-confirmation-btn-wrap { margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.brill-popup-cancel-btn{ width: 150px; color: #fff; border: 0; box-shadow: none; font-size: 17px; font-weight: 500; border-radius: 5px; padding: 10px; margin: 0 5px; cursor: pointer; background-color: rgb(221, 51, 51); }
.brill-popup-cancel-btn:hover{ background-color: rgb(198 34 34);; }
.brill-popup-confirm-btn{ width: 150px; color: #fff; border: 0; box-shadow: none; font-size: 17px; font-weight: 500; border-radius: 5px; padding: 10px; margin: 0 5px; cursor: pointer; background-color: rgb(48, 133, 214); }
.brill-popup-confirm-btn:hover{ background-color: rgb(41 121 198); }
.brill-popup-process-wrap{display: flex; align-items: center; justify-content: center; gap: 5px;}
.brill-process-txt{text-transform: capitalize;}


/* all syncs page style */
.brill-sync-status-active { color: #00a32a; }
.brill-sync-status-draft { color: #dba617; }
.brill-sync-status-error { color: #d63638; }

@media only screen and (max-width: 1024px){
    .bd-general-configuration-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-general-configuration-wrap{width:96%;}
    .brillforms-field-map-table{width: 100%;}
  }
  
  @media only screen and (max-width:767px){
    .bd-two-coloumn-wrap{flex-direction: column; width: 100%; max-width: 100%;}
    .bd-general-configuration-wrap{width: 92%;}
    .bd-form-container{width: 100%;padding-left: 0px;}
    .bd-input-wrap span{font-size: 12px;}
    .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;}
    .brillforms-tooltip-text{width: 210px; margin-left: -110px;}
    .brillforms-tooltip-text, .brillforms-tooltip-text::after{left: unset; right: 0;}
    .brillforms-api-invalid span.dashicons.dashicons-no-alt, .bd-input-wrap .dashicons-saved{font-size: 20px;}
    .brillforms-error-log{overflow-x: auto;}
    .brillforms-error-log table{width: 750px;}
    .brillforms-field-map-table{width: 100%;}
    .brillforms-field-map-table thead tr th.brill-mapping-datas {width: 100%;}
    .brillforms-add-sync-wrap .brillforms-tooltip-text{left: 10px; width: 310px;}
    .brillforms-add-sync-wrap .brillforms-tooltip-text::after{left: 4%; right: 100%;}
  }