﻿body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #384f70;
    margin: 0; /*'Open Sans'*/
    line-height: 1.5;
    -webkit-touch-callout: none; /*Prevent iOS long click menu on links*/
    -webkit-tap-highlight-color: rgba(0,0,0,0); /*iOS remove click highlight*/
    background-image: url('/images/background/bp_logo.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-attachment: fixed;
    background-color: #6080b0;
}

h1, h2, h3, h4{font-weight: normal;}

h1.title, h2.title {
    letter-spacing: 1px;
    font-size: 1.2em;
    padding: 5px;
}

h2.title_c_y {
    background-color: #fff9d7;
    border: 1px solid #e2c822
}

/*Mobiscroll Custom*/
.mbsc-wdg .mbsc-wdg-c {font-size: 16px;}
.mbsc-fr-overlay {background: rgba(0,0,0,.7) !important;}
.mbsc-ios.mbsc-fr-top .mbsc-fr-popup {max-width: 800px; margin: 0 auto 50px auto; position:relative;}
.mbsc-ios.mbsc-fr-center .mbsc-fr-popup {max-width: 400px;}
.mbsc-fr-btn-c .mbsc-fr-btn{color: #ff0000;}

.nav_bar_holder {width: 100%;position: fixed;top: 0;left: 0;z-index: 1000;}
.nav_bar {font-size: 1.2em;margin: 0 auto 0 auto;box-sizing:border-box;width: 1000px;padding: 7px 15px 7px 15px;background-color: #446088;border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;opacity: .8;display: flex; justify-content: space-between;}
.nav_box_l{display:flex; align-items:center; min-width:0;}
.nav_box_r{display:flex; visibility:hidden; align-items:center; min-width:150px; justify-content:right;}
.nav_link{margin-left: 14px; color:#fff;}
.nav_link_spacer{margin-left: 14px;color: #f0f040;}

.page_title {font-size: 1.3em; margin: 0; background-color: #6b89b5;border-radius: 5px;color: #fff;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.page_body_holder {margin: 25px auto 40px auto;width: 1000px;}
.page_body {margin-top: 100px;padding: 20px 30px 20px 30px;box-sizing:border-box;border-radius: 15px;box-shadow: 0 0 10px 5px #446088;background-color: #fff;}

.page_bar {display: grid;grid-template-columns: 40% 60%; margin-bottom:20px;}
.page_bar_left {grid-column: 1;width: 100%;max-width: 100%;text-align: center;}
.page_bar_right {grid-column: 2; text-align: right;display:flex;justify-content: space-evenly;}

.home_title{}
.home_section{text-align:center; font-size:1.2em;margin-bottom: 40px;}
.home_link{margin-top: 20px;}

.modal_body input, textarea{font-family: sans-serif;font-size: 1.1em; border-radius: 3px; background: #fff; width: 100%; padding: .25em .67em; border: 0; min-height: 2.5em; box-sizing: border-box;}
.modal_simple_text{font-size: 1.1em; text-align: center; margin: 20px 0 20px 0;}
.modal_label{font-size: .8em; margin: 10px 0 0 0; color: #007aff;}
.modal_label_error{background: #fd4444; padding: 5px; border-radius: 5px 5px 0 0; color: #ffffff;}
.modal_box{background: #fff; border-radius: 3px;border: 1px solid #cccccc;padding: 5px;margin: 10px 0;}
.modal_input_m_b{margin-bottom: 5px;}
.modal_input_w_extra{overflow: hidden; padding-right: .5em;}
.modal_color_picker input{height: 2.5em; cursor: pointer; width: 40px; display: block; padding: 0;}

.bi{margin: 0 0 10px 70px;}
.bi_summary{margin-bottom: 40px;}

.book_name{font-size: 1.5em;}
.book_copyright{margin-top: 20px; text-align:center;}

.ch_holder {margin-bottom:20px;}
.ch {padding: 0 2px 0 2px;}
.ch:hover {background-color: #E6EBF2;}
.ch_links {margin: 40px 0 40px 0;display:flex;justify-content:space-evenly;}

.verse_num{color: #2587c7;}

.page_f_l{float:left;}
.page_f_r{float:right;}
.page_f_l_q{float:left; width:25%;}
.page_f_r_q{float:right; width:25%;}
.page_f_l_h{float:left; width:50%;}
.page_f_r_h{float:right; width:50%;}
.page_input_l{float:left; width:50%;text-align: right;}
.page_input_m{margin-right: 20px;}
.page_input_r{width: 70%;}
.page_input_r_extra{overflow: hidden; padding-right: .5em;}
.page_input_r_extra_f{width: 100%;}

.page_input_holder{width: 30%; margin: 0 auto 30px auto;}
.page_input{width: 100%;}
.info_field{color: #9E9E9E;font-size: .9em;margin-bottom: 5px;box-sizing: border-box;}
.info_value{word-break: break-word;margin-bottom: 5px;white-space: pre-wrap;}
.info_value_p{margin: 0 10px 5px 5px;}

.clear{clear:both;}
.f_l{float:left;}
.f_r{float:right;}
.f_r_f{float:right; width: 20%;}
.f_l_q{float:left; width: 25%;}
.f_r_q{float:right; width: 25%;}
.f_l_t{float:left; width: 33%;}
.f_r_t{float:right; width: 33%;}
.f_l_h{float:left; width: 50%;}
.f_r_h{float:right; width: 50%;}
.a_r{text-align:right;}
.t_a_l{text-align:left;}
.t_a_c{text-align:center;}
.t_a_r{text-align:right;}
.pad_ten{padding: 10px; box-sizing: border-box;}
.pad_ten_r{padding-right: 10px; box-sizing: border-box;}
.d_n{display:none;}
.overflow {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

.node_button{text-align:right; margin-top:30px;}
.show_password {cursor: pointer; font-style:italic; text-align:right;}

.paragraph {margin-bottom: 40px;line-height:2em;}
.t_s{font-size:.8em;}
.t_b{font-weight:bold;}
.t_u{text-decoration:underline;}
.indent_holder{margin: 15px 0 0 25px;}
.danger_holder{padding: 10px; border: 1px solid #c0392b;}
.error_border{border: 1px solid #F03434 !important;}

.menu {text-align: center;cursor: pointer; margin-bottom: 20px;}
.menu-selected {border-bottom: 3px solid #2196F3;}
.menu-not-selected {border-bottom: 1px solid #9E9E9E;}

.edit{border-radius: 3px;padding: 0.25em 0.67em;min-height: 80px;background: #fff; border: 1px solid;}
.icon {cursor:pointer;vertical-align: middle;}
.icon_l {margin-left: 14px;}
.icon_25 {width: 25px;}

.loader {border: 8px solid #fff; border-top: 8px solid #2196f3; border-bottom: 8px solid #2196f3; border-radius: 50%; width: 50px; height: 50px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;display: inline-block;}
.loader_top {position: fixed; top: 0px; left: 50%; margin: -40px 0 0-25px; z-index: 999999;}
.message_popup {position: fixed;z-index: 100000;margin: auto;top: 0;right: 0;left: 0;width: 7em;background: white;bottom: auto;text-align: center;font-size: 1.2em;padding: 5px;border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);}

a{text-decoration:none; color: #2196F3;}
a.button{color: #6b89b5; text-decoration: none;padding: 4px 20px;display: inline-block;border: solid 1px #6b89b5;border-radius: 5px;margin: 0 5px 0 5px;text-align: center;}
a.button:hover{opacity: .8;}
a.button_page_input{margin: 10px;}

a.button_modal{border: 1px solid #d9d9d9;background:#fff;border-radius: 5px;margin: 8px;width: 90%;box-sizing: border-box;line-height: 1em;padding: 0.5em 2em;display: inline-block;}
a.button_modal_r {background:#F03434; color: #fff;}
a.button_modal_g {background:#27bf0a; color: #fff;}

.simple_check_mark::before{content: "\2713";font-size: 1.2em; line-height: 1.5;}
.simple_empty_box::before{content: "\02610";font-size: 1.2em; line-height: 1.5;}

.chk_box input[type=checkbox]{display: none;}
.chk_box label{display: inline-block;text-align: center;cursor: pointer;}
.chk_box input[type=checkbox] + label{width: 2em;height: 2em;border: solid 1px #888888;border-radius: 10px;background: #fff;vertical-align: middle;margin-right:10px;}
.chk_box input[type=checkbox]:checked + label::before{content: "\2713";color: #2196F3;font-size: 24px;}

.radio_box input[type=radio]{display: none;}
.radio_box label{display: inline-block;text-align: center;cursor: pointer;}
.radio_box input[type=radio] + label{width: 2em;height: 2em;border: solid 1px #888888;border-radius: 20px;background: #fff;vertical-align: middle;margin-right:10px;}
.radio_box input[type=radio]:checked + label::before{content: "\2713";color: #2196F3;font-size: 24px;}

.switch_holder{margin:10px 15px 10px 10px;}
.switch_text {float:left; font-size: 1.1em;margin: 8px 10px 0 0;}
.switch_text_selected{color: Green;}
.switch {position: relative;display: inline-block;width: 60px;height: 34px;}
.switch_slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;background: #ccc;transition: .4s;border-radius: 34px;}
.switch_slider:before {position: absolute;content: "";height: 26px;width: 26px;left: 4px;bottom: 4px;background: white;transition: .4s;border-radius: 50%;}
.switch_input:checked + .switch_slider {background: #2196F3;}
.switch_input:checked + .switch_slider:before {-webkit-transform: translateX(26px);transform: translateX(26px);}

.box_round{background: #fff; border-radius: 5px; border: solid 1px #446088; padding: 5px; box-sizing:border-box;min-height: 2.5em;}
.box_round:focus{box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);}
.box_round_modal{font-size:1.1em; margin: 0 0 0.25em; border-color: #fff; width: 100%;}
.box_round_form{margin: 0 0 0.75em;}
.box_round_m{margin:0 5px 0 5px;}
select.box_round, select.box_round_modal{-webkit-appearance:none; -moz-appearance: none; background: #fff url(/images/down-arrow.svg) no-repeat 100% 50%;}

input[type=text], input[type=password] {-webkit-appearance: none; -moz-appearance: none; appearance: none;}

.footer{margin:60px 0 40px 0; text-align:center;word-wrap: break-word;}
.footer_items{margin-bottom:30px;}
.footer_logo{margin-bottom: 30px;}
.footer_link{display:inline; padding: 0 10px 0 10px; color: #fff;}

.c_error{color:#F03434;}
.c_success{color:#27bf0a;}
.c_svg_success{fill:#27bf0a;stroke:none;}
.c_svg_error{fill:#F03434;stroke:none;}

.c_w{color:#FFF;}
.c_blue {color: #2196F3;}
.c_gray {color: #bbbbbb;}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@media (max-width: 1300px) {
    .page_bar {grid-template-columns: 1fr;}
    .page_bar_left {grid-column: 1;grid-row: 1;}
    .page_bar_right {grid-column: 1;grid-row: 2;margin-top: 20px; text-align:center;}
}

@media screen and (max-width: 1000px) {
    body {background-image: none;}

    .nav_bar{width: auto;padding: 5px 10px 5px 10px; border-radius: 0;}
    .nav_box_l_extra{visibility: hidden;}
    .nav_box_r{visibility: visible;}

    .page_body_holder{width: auto;min-width: initial;}
    .page_body{border-radius: 0px;padding: 20px 10px 50px 10px;}

    .page_f_l{float:none;}
    .page_f_r{float:none;}
    .page_f_l_q{float:none;width: auto;}
    .page_f_r_q{float:none;width: auto;}
    .page_f_l_h{float:none;width: auto;}
    .page_f_r_h{float:none;width: auto;}
    .page_input_l{float:none; width:auto;text-align: left;}
    .page_input_r{width: 100%;}

    .page_input_holder{width: 50%;}

    .button_page_input {text-align:center; display: block;}

    .footer_items{margin-bottom:0;}
    .footer_link{display:block;padding: 10px 0 10px 0; border-top: 1px solid #bbb}
}

@media screen and (max-width: 600px) {
    .page_bar_right {flex-direction: column;gap: 20px;}

    .page_input_holder{width: 100%;}
}

@media screen and (max-width: 350px) {
    .page_title{display:none;}
}
