@charset "utf-8";
/* Main CSS Document for JoomplaPlus library */

/* Common styles */
.pt_100pct{padding-top:100%}
/* --- */

/* Profile badge */
.user_badge{height:100px;width:100px}
.user_badge .inital{font-size:60px;line-height:60px}
.user_badge .user_pic{background-position:center center;background-repeat:no-repeat;background-size:cover}
/* --- */

/* Jcrop */
.jcrop-holder{margin-right:auto;margin-left:auto}
@media(max-width:767.98px){
.jcrop-holder{margin-top:180px}
}
@media(min-width:768px){
.jcrop-holder{margin-right:180px}
}
.jcrop-holder #preview-pane{background-color:#ddd;border-radius:50%;display:block;position:absolute;top:10px;right:-280px;z-index:10}
@media(max-width:767.98px){
.jcrop-holder #preview-pane{top:-180px;right:auto;bottom:auto;left:auto}
}
@media(min-width:768px){
.jcrop-holder #preview-pane{top:0;right:-180px;bottom:auto;left:auto}
}
#preview-pane .preview-container{border-radius:50%;height:150px;overflow:hidden;width:150px}
/* --- */

/* Structure */
.structure{text-align:center}
.structure .badge_stiker{border:solid 3px #000;top:0;right:0;bottom:0;left:0}
.structure .badge_stiker_wrapper{font-size:8px;height:5em;top:0;right:auto;bottom:auto;left:0;width:5em;z-index:1}
@media(max-width:767.98px){
.structure .branch_01 .line_02 .structure_item{background-color:rgba(0,0,0,.2)}
.structure .branch_01 .line_03 .structure_item{background-color:rgba(0,0,0,.1)}
.structure .branch_02 .line_02 .structure_item{background-color:rgba(255,255,255,.1)}
.structure .branch_02 .line_03 .structure_item{background-color:rgba(255,255,255,.05)}
.structure .branch_03 .line_02 .structure_item{background-color:rgba(0,0,0,.2)}
.structure .branch_03 .line_03 .structure_item{background-color:rgba(0,0,0,.1)}
}
.structure .structure_item{padding-top:.5rem;padding-bottom:.5rem;width:100%}
.structure .structure_item .item_badge{max-width:100px;width:100%}
.structure .structure_item .item_date{font-size:12px;line-height:12px}
.structure .user_badge{font-size:1px;height:auto;max-width:100em;padding-top:100%;width:100%}
.structure .user_badge>a{border:solid 2px #000;position:absolute;top:0;right:0;bottom:0;left:0}
.structure .user_badge .inital{font-size:35em}
.structure_form .btn_structure{border-color:#565b63;border-style:solid;border-width:3px;height:1.7rem;font-size:14px;margin-top:.3rem;margin-right:.3rem;margin-bottom:.3rem;margin-left:.3rem;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;position:relative;width:1.7rem}
.structure_form .btn_structure.active:after{content:'';display:block;height:.2em;position:absolute;bottom:-.5em;width:100%}
/* --- */

/* Structure colors */
/* Level 1 */
.structure_form .btn_structure_1{color:#fff}
.structure_form .btn_structure_1.active:after{background-color:#565b63}
.structure_form .btn_structure_1,.structure.level_1 .badge_stiker{border-color:#565b63}
.structure.level_1 .user_badge>a{border-color:#565b63}
/* --- */
/* Level 2 */
.structure_form .btn_structure_2{color:#fff}
.structure_form .btn_structure_2.active:after{background-color:#888c92}
.structure_form .btn_structure_2,.structure.level_2 .badge_stiker{border-color:#888c92}
.structure.level_2 .user_badge>a{border-color:#888c92}
/* --- */
/* Level 3 */
.structure_form .btn_structure_3{color:#fff}
.structure_form .btn_structure_3.active:after{background-color:#c3d2ea}
.structure_form .btn_structure_3,.structure.level_3 .badge_stiker{border-color:#c3d2ea}
.structure.level_3 .user_badge>a{border-color:#c3d2ea}
/* --- */
/* Level 4 */
.structure_form .btn_structure_4{color:#fff}
.structure_form .btn_structure_4.active:after{background-color:#2f5d32}
.structure_form .btn_structure_4,.structure.level_4 .badge_stiker{border-color:#2f5d32}
.structure.level_4 .user_badge>a{border-color:#2f5d32}
/* --- */
/* Level 5 */
.structure_form .btn_structure_5{color:#fff}
.structure_form .btn_structure_6.active:after{background-color:#61964c}
.structure_form .btn_structure_5,.structure.level_5 .badge_stiker{border-color:#61964c}
.structure.level_5 .user_badge>a{border-color:#61964c}
/* --- */
/* Level 6 */
.structure_form .btn_structure_6{color:#fff}
.structure_form .btn_structure_6.active:after{background-color:#5ee22a}
.structure_form .btn_structure_6,.structure.level_6 .badge_stiker{border-color:#5ee22a}
.structure.level_6 .user_badge>a{border-color:#5ee22a}
/* --- *
/* Level 7 */
.structure_form .btn_structure_7{color:#fff}
.structure_form .btn_structure_7.active:after{background-color:#344777}
.structure_form .btn_structure_7,.structure.level_7 .badge_stiker{border-color:#344777}
.structure.level_10 .user_badge>a{border-color:#344777}
/* --- */
/* Level 8 */
.structure_form .btn_structure_8{color:#fff}
.structure_form .btn_structure_8.active:after{background-color:#4d66a7}
.structure_form .btn_structure_8,.structure.level_8 .badge_stiker{border-color:#4d66a7}
.structure.level_8 .user_badge>a{border-color:#4d66a7}
/* --- */
/* Level 9 */
.structure_form .btn_structure_9{color:#fff}
.structure_form .btn_structure_9.active:after{background-color:#4073f3}
.structure_form .btn_structure_9,.structure.level_9 .badge_stiker{border-color:#4073f3}
.structure.level_9 .user_badge>a{border-color:#4073f3}
/* --- */
/* Level 10 */
.structure_form .btn_structure_10{color:#fff}
.structure_form .btn_structure_10.active:after{background-color:#585a36}
.structure_form .btn_structure_10,.structure.level_10 .badge_stiker{border-color:#585a36}
.structure.level_10 .user_badge>a{border-color:#585a36}
/* --- */
/* Level 11 */
.structure_form .btn_structure_11{color:#fff}
.structure_form .btn_structure_11.active:after{background-color:#8a903f}
.structure_form .btn_structure_11,.structure.level_11 .badge_stiker{border-color:#8a903f}
.structure.level_11 .user_badge>a{border-color:#8a903f}
/* --- */
/* Level 12 */
.structure_form .btn_structure_12{color:#fff}
.structure_form .btn_structure_12.active:after{background-color:#d5e40e}
.structure_form .btn_structure_12,.structure.level_12 .badge_stiker{border-color:#d5e40e}
.structure.level_12 .user_badge>a{border-color:#d5e40e}
/* --- */