/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/** Custom **/
code {color: #ffffff; background-color: #363132; padding: 2px 6px; letter-spacing: 0; border-radius: 3px; margin: 0 2px; font-size:0.8em; vertical-align: text-bottom;}
.brxe-post-content h1, .brxe-post-content h2, .brxe-post-content h3, .brxe-post-content h4, .brxe-post-content h5, .brxe-post-content h6   {font-family: 'Noto Sans TC', sans-serif; !important}
.brxe-post-content ul, .brxe-post-content ol {padding-left:22px}
.brxe-post-content h1,
.brxe-post-content h2,
.brxe-post-content h3,
.brxe-post-content h4 { margin-bottom:20px }
.brxe-post-content h5,
.brxe-post-content h6 { margin-bottom:8px }
.brxe-post-content p { margin-bottom:20px }
.brxe-post-content table, .brxe-post-content table td, .brxe-post-content table th { border: 1px solid !important; padding:5px !important}
.brxe-post-content table td {text-align: center}
.brxe-post-content table td:first-child {text-align: left}
.brxe-post-content table th { background-color:var(--bricks-color-usqbac)}
.brxe-post-content table { width: 100%; border-collapse: collapse; margin-bottom: 30px}
.brxe-post-content a, .faq-wrapper a { border-bottom:1px solid var(--bricks-color-usqbac); color:var(--bricks-color-usqbac) }
.brxe-post-content a:hover, .faq-wrapper a:hover {border-bottom:1px solid #363636; color:#363636 }
.brxe-post-content img {border-radius:8px}
.brxe-post-content h1:first-child, 
.brxe-post-content h2:first-child, 
.brxe-post-content h3:first-child, 
.brxe-post-content h4:first-child { margin-top:0px }
.brxe-post-content pre {margin-bottom:30px}
.brxe-post-content ul li {margin-bottom:8px}
.brxe-post-content ol li {margin-bottom:8px}
.brxe-post-content ul, .brxe-post-content ol {margin-bottom:30px}
.brxe-post-content ul li img, .brxe-post-content ol li img { margin-top:10px }
.brxe-post-content blockquote { background: #f7f7f7; width: 100%; margin-bottom: 1.2em; padding: 1em !important; color: #797C80; font-size: 16px; border-left-style:none; border-radius: 5px;}
.brxe-post-content blockquote:before {content: "“"; display: block; font-size:70px; line-height:70px; color: var(--bricks-color-usqbac); height: 35px;}
.brxe-post-content blockquote p { margin-bottom:0px }
#brx-content .text-link a { border-bottom:1px solid var(--bricks-color-usqbac); color:var(--bricks-color-usqbac) }
.text-link-none, .text-link-none a { border-bottom:0 !important; color:#363636 !important }

/** Admin Dashboard **/
.admin-dashboard .chaty {display:none !important}


/** Checkbox & Radio **/
.options-wrapper{ list-style-type: none; margin: 0; padding: 0;}
.options-wrapper label { display: inline-block; height: auto; margin: 0 5px 0 0; width: auto; color:#000000 }
.options-wrapper input[type=checkbox], .options-wrapper input[type=radio]{ margin: initial; padding: initial; position: relative; top: 1px; margin-right:3px; border: 0px;}

/** Checkbox 2 **/
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
.checkbox-style-2 input[type=checkbox] {--active: #275EFE; --active-inner: #fff; --focus: 2px rgba(39, 94, 254, .3); --border: #BBC1E1; --border-hover: #275EFE; --background: #fff; --disabled: #F6F8FF; --disabled-inner: #E1E6F9; -webkit-appearance: none; -moz-appearance: none; height: 19px; outline: none; display: inline-block; vertical-align: top; position: relative; margin: 0; cursor: pointer; border: 1px solid var(--bc, var(--border)); background: var(--b, var(--background)); transition: background 0.3s, border-color 0.3s, box-shadow 0.2s; padding: 0;}
.checkbox-style-2 input[type=checkbox]:after {content: ""; display: block; left: 0; top: 0; position: absolute; transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);}
.checkbox-style-2 input[type=checkbox]:checked {--b: var(--active); --bc: var(--active); --d-o: .3s; --d-t: .6s; --d-t-e: cubic-bezier(.2, .85, .32, 1.2);}
.checkbox-style-2 input[type=checkbox]:disabled {--b: var(--disabled); cursor: not-allowed; opacity: 0.9;}
.checkbox-style-2 input[type=checkbox]:disabled:checked {--b: var(--disabled-inner); --bc: var(--border);}
.checkbox-style-2 input[type=checkbox]:disabled + label {cursor: not-allowed;}
.checkbox-style-2 input[type=checkbox]:hover:not(:checked):not(:disabled) {--bc: var(--border-hover);}
.checkbox-style-2 input[type=checkbox]:focus {box-shadow: 0 0 0 var(--focus);}
.checkbox-style-2 input[type=checkbox]:not(.switch) {width: 19px;}
.checkbox-style-2 input[type=checkbox]:not(.switch):after {opacity: var(--o, 0);}
.checkbox-style-2 input[type=checkbox]:not(.switch):checked {--o: 1;}
.checkbox-style-2 input[type=checkbox] + label {display: inline-block; vertical-align: super; cursor: pointer; margin-left: 6px; font-size: 16px; line-height: 20px}
.checkbox-style-2 input[type=checkbox]:not(.switch) {border-radius: 3px;}
.checkbox-style-2 input[type=checkbox]:not(.switch):after {width: 5px; height: 9px; border: 2px solid var(--active-inner); border-top: 0; border-left: 0; left: 6px; top: 3px; transform: rotate(var(--r, 20deg));}
.checkbox-style-2 input[type=checkbox]:not(.switch):checked {--r: 43deg;} }
.checkbox-style-2 * {box-sizing: inherit;}
.checkbox-style-2 *:before, .checkbox-style-2 *:after {box-sizing: inherit;}

/** Checkbox 3 **/
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .checkbox-style-3 input[type=checkbox] {--active: #275EFE; --active-inner: #fff; --focus: 2px rgba(39, 94, 254, .3); --border: #BBC1E1; --border-hover: #275EFE; --background: #fff; --disabled: #F6F8FF; --disabled-inner: #E1E6F9; -webkit-appearance: none; -moz-appearance: none; height: 23px; outline: none; display: inline-block; vertical-align: top; position: relative; margin: 0; cursor: pointer; border: 1px solid var(--bc, var(--border)); background: var(--b, var(--background)); transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;}
    .checkbox-style-3 input[type=checkbox]:after {content: ""; display: block; left: 0; top: 0; position: absolute; transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);}
    .checkbox-style-3 input[type=checkbox]:checked {--b: var(--active); --bc: var(--active); --d-o: .3s; --d-t: .6s; --d-t-e: cubic-bezier(.2, .85, .32, 1.2);}
    .checkbox-style-3 input[type=checkbox]:disabled {--b: var(--disabled); cursor: not-allowed; opacity: 0.9;}
    .checkbox-style-3 input[type=checkbox]:disabled:checked {--b: var(--disabled-inner); --bc: var(--border);}
    .checkbox-style-3 input[type=checkbox]:disabled + label {cursor: not-allowed;}
    .checkbox-style-3 input[type=checkbox]:hover:not(:checked):not(:disabled) {--bc: var(--border-hover);}
    .checkbox-style-3 input[type=checkbox]:focus {box-shadow: 0 0 0 var(--focus);}
    .checkbox-style-3 input[type=checkbox]:not() {width: 21px;}
    .checkbox-style-3 input[type=checkbox]:not():after {opacity: var(--o, 0);}
    .checkbox-style-3 input[type=checkbox]:not():checked {--o: 1;}
    .checkbox-style-3 input[type=checkbox] + label {display: inline-block; vertical-align: super; cursor: pointer; margin-left: 4px;}
    .checkbox-style-3 input[type=checkbox]:not() {border-radius: 7px;}
    .checkbox-style-3 input[type=checkbox]:not():after {width: 5px; height: 9px; border: 2px solid var(--active-inner); border-top: 0; border-left: 0; left: 7px; top: 4px; transform: rotate(var(--r, 20deg));}
    .checkbox-style-3 input[type=checkbox]:not():checked {--r: 43deg;}
    .checkbox-style-3 input[type=checkbox] {width: 40px; border-radius: 11px;}
    .checkbox-style-3 input[type=checkbox]:after {left: 2px; top: 2px; border-radius: 50%; width: 17px; height: 17px; background: var(--ab, var(--border)); transform: translateX(var(--x, 0));}
    .checkbox-style-3 input[type=checkbox]:checked {--ab: var(--active-inner); --x: 17px;}
    .checkbox-style-3 input[type=checkbox]:disabled:not(:checked):after {opacity: 0.6;}
}
.checkbox-style-4 * {box-sizing: inherit;}
.checkbox-style-4 *:before, .checkbox-style-3 *:after {box-sizing: inherit;}

/** radio 2 **/
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
.radio-style-2 input[type=radio] {--active: #275EFE; --active-inner: #fff; --focus: 2px rgba(39, 94, 254, .3); --border: #BBC1E1; --border-hover: #275EFE; --background: #fff; --disabled: #F6F8FF; --disabled-inner: #E1E6F9; -webkit-appearance: none; -moz-appearance: none; height: 19px; outline: none; display: inline-block; vertical-align: top; position: relative; margin: 0; cursor: pointer; border: 1px solid var(--bc, var(--border)); background: var(--b, var(--background)); transition: background 0.3s, border-color 0.3s, box-shadow 0.2s; padding: 0;}
.radio-style-2 input[type=radio]:after {content: ""; display: block; left: 0; top: 0; position: absolute; transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);}
.radio-style-2 input[type=radio]:checked {--b: var(--active); --bc: var(--active); --d-o: .3s; --d-t: .6s; --d-t-e: cubic-bezier(.2, .85, .32, 1.2);}
.radio-style-2 input[type=radio]:disabled {--b: var(--disabled); cursor: not-allowed; opacity: 0.9;}
.radio-style-2 input[type=radio]:disabled:checked {--b: var(--disabled-inner); --bc: var(--border);}
.radio-style-2 input[type=radio]:disabled + label {cursor: not-allowed;}
.radio-style-2 input[type=radio]:hover:not(:checked):not(:disabled) {--bc: var(--border-hover);}
.radio-style-2 input[type=radio]:focus {box-shadow: 0 0 0 var(--focus);}
.radio-style-2 input[type=radio]:not(.switch) {width: 19px;}
.radio-style-2 input[type=radio]:not(.switch):after {opacity: var(--o, 0);}
.radio-style-2 input[type=radio]:not(.switch):checked {--o: 1;}
.radio-style-2 input[type=radio] + label {display: inline-block; vertical-align: super; cursor: pointer; margin-left: 6px; font-size: 16px; line-height: 20px}
.radio-style-2 input[type=radio]:not(.switch) {border-radius: 99em;}
.radio-style-2 input[type=radio]:not(.switch):after {width: 5px; height: 9px; border: 2px solid var(--active-inner); border-top: 0; border-left: 0; left: 6px; top: 3px; transform: rotate(var(--r, 20deg));}
.radio-style-2 input[type=radio]:not(.switch):checked {--r: 43deg;} }
.radio-style-2 * {box-sizing: inherit;}
.radio-style-2 *:before, .radio-style-2 *:after {box-sizing: inherit;}