@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* { font-family: 'Roboto', sans-serif; padding:0; margin:0; outline:none; }
html { -webkit-text-size-adjust:100%; }
select { -webkit-appearance:none; -moz-appearance:none; appearance:none; }
select::-ms-expand { display:none }
.cl { clear:both }
img { max-width: 100%; }
body { background-color:#fff; }
.cnt { width:1335px; margin:0 auto; }
#vcontent { display:block; padding:60px 0; width:1460px; max-width:100%; }
.bottom_nav { padding:10px 30px; left:0; height:30px; width:calc(100% - 60px); position:fixed; bottom:0; background:#fff; z-index:50; border-top:1px solid rgba(0,0,0,0.1); }
.rside { float:right; width:calc(100% - 125px); position:relative; }
#tabs { margin-bottom:20px; }
#tabs::after { content:""; display:block; clear:both; }
#tabs ul { list-style-type:none; margin-left:300px; }
#tabs ul li { cursor:pointer; transition:0.3s ease; margin-right:10px; color:#fff; font-size:15px; font-weight:500; padding:0 15px; display:inline-block; height:36px; line-height:36px; border-radius:5px; }
#tabs ul li:last-child { margin-right:0; }
#tabs ul li:hover { opacity:0.8; }
.left_tabs { list-style-type:none; height:30px; }
.left_tabs li { position:relative; display:inline-block; margin-left:20px; cursor:pointer; }
.left_tabs li > span:first-child { width:30px; height:30px; border-radius:50%; background-repeat:no-repeat; background-position:center; display:block; float:left; }
.left_tabs li > span:first-child > span { width:30px; height:30px; background-repeat:no-repeat; background-position:center; display:block; background-size:12px auto; filter: brightness(0) invert(1); }
.left_tabs li::after { content:""; display:block; clear:both; }
.left_tabs li > span:nth-child(2) { display:none; }
.left_tabs li:hover > span:nth-child(2) { display:block; width:200px; left:-95px; padding:6px 10px; position:absolute; bottom:36px; background:#111; color:#fff; border-radius:3px; font-size:12px; font-weight:400; text-align:center; }
.left_tabs li:hover > span:nth-child(1)::before { content:""; position:absolute; bottom:31px; left:calc(50% - 5px); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #111; }
.main_cparams .left_tabs li > span:first-child > span { background-size:30px auto; width:28px; height:28px; filter: none; }
.main_cparams .left_tabs li > span:first-child { border-radius:5px; width:28px; height:28px; border:1px solid rgba(0,0,0,0.1); background-color:rgba(0,0,0,0.05); }
.main_cparams .left_tabs li#lft_remove_teeth > span:first-child > span { background-size:20px auto; opacity:0.3; width:28px; height:28px; filter: none; }
.main_cparams .left_tabs li#lft_remove_params > span:first-child > span { background-size:15px auto; opacity:0.5; width:28px; height:28px; filter: none; }
.teeth_table { width:100%; border-collapse:collapse; }
.teeth_table tr td { text-align:center; border-top:1px solid rgba(0,0,0,0.05); padding:5px; height:24px; width:55px; }
.teeth_table tr td:first-child { text-align:right; width:150px; font-size:14px; color:#666; }
.bottom_teeth_table tr:last-child td { border-bottom:1px solid rgba(0,0,0,0.05); }
.tooth { border:1px solid #fff; border-radius:5px; display:inline-block; width:55px; height:55px; background-repeat:no-repeat; background-position:center; cursor:pointer; }
.tooth.hide_teeth { opacity:0.3; }
.teeth_box { line-height:40%; }
.teeth_table tr td.teeth_box { padding-left:1px; padding-right:1px; }
.tooth.selected { border:1px solid rgba(7,157,174,1); }
.sele_param { position:relative; cursor:pointer; margin:2px; display:inline-block; width:15px; height:15px; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.sele_param > span { position:relative; cursor:pointer; display:inline-block; width:15px; height:15px; background-repeat:no-repeat; background-position:center; background-size:contain; }
.odontogram_selections { width:140px; position:absolute; top: calc(50% - 54px); left: -125px; background: #fff; padding-right: 20px; }
.odontogram_selections > div { cursor:pointer; opacity:0.7; width:70px; height:35px; display:block; float:left; background-repeat:no-repeat; background-image:url(images/teeth-selection.png); }
#odo_1 { background-position: -144px 0; }
#odo_2 { background-position: -214px 0; float:right; }
#odo_3 { background-position: -214px -40px; float:right; }
#odo_4 { background-position: -144px -40px; margin-bottom:16px; }
.odontogram_selections > div:hover { opacity:0.9; }
.odontogram_selections > div.selected_all { opacity:1; }
.clear_odo_select { transition:0.3s ease; cursor:pointer; border-radius:3px; display:block; text-align:center; font-size:12px; clear:both; margin-top:16px; font-weight:500; color:#9b9b9b; border:1px solid #9b9b9b; height:24px; line-height:24px; }
.clear_odo_select:hover { color:#fff; background:#9b9b9b; }
.ttt_1, .ttt_2, .ttt_3, .ttt_4, .ttt_5 { margin:0; margin-left:auto; margin-right:auto; margin-top:-5px; margin-bottom:-5px; display:block; }
.ttt_1, .ttt_2, .ttt_3, .ttt_4, .ttt_5, .ttt_1 > span, .ttt_2 > span, .ttt_3 > span, .ttt_4 > span, .ttt_5 > span { width:37px; height:37px; background-size:37px auto; }
.sele_param::after { z-index:60; width:150px; left:calc(50% - 73px); color:#fff; font-size:12px; font-weight:500; display:none; position:absolute; padding:5px; background-color:#000; border-radius:3px; bottom:20px; }
.sele_param:hover::after { display:block !important; }
.sele_param:hover::before { content:""; position:absolute; bottom:15px; left:calc(50% - 5px); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #000; }
.ttt_1.sele_param::after, .ttt_2.sele_param::after, .ttt_3.sele_param::after, .ttt_4.sele_param::after, .ttt_5.sele_param::after { bottom:37px; }
.ttt_1.sele_param:hover::before, .ttt_2.sele_param:hover::before, .ttt_3.sele_param:hover::before, .ttt_4.sele_param:hover::before, .ttt_5.sele_param:hover::before { bottom:32px; }
.lt_item, .main_cparams { display:inline-block; }
.bottom_nav .select2-container { float:left; margin-right:30px; width:200px !important; }
.bottom_nav .select2-container .select2-selection--single { height: 30px; }
.bottom_nav .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 15px; color: #000; line-height: 30px; }
.bottom_nav .select2-container--default .select2-selection--single .select2-selection__arrow { height: 28px; width: 28px; }
.right_bottom_nav_side { display:block; float:right; width:calc(100% - 230px); }
.ttt_1 > span { background:none !important; }
.ttt_1 > span::before { content:""; width: calc(100% + 27px); left: -13px; height:4px; position:absolute; top:calc(50% - 2px); background:#4c6173; display:block; }
.wide_ts .ttt_1 > span::before { width: calc(100% + 7px); left: 7px; }
.wide_tp .ttt_1 > span::before { width: calc(100% + 7px); left: -13px; }
.wide_ts.wide_tp .ttt_1 > span::before { width: calc(100% - 13px); left: 7px; }
.wide_ts .ttt_1 > span::after { content:""; width: 4px; left: 7px; height:6px; position:absolute; top:calc(50% + 2px); background:#4c6173; display:block; }
.wide_ts.wide_tp .ttt_1::before { border:0 !important; content:""; width: 4px; left: 7px; height:6px; position:absolute; top:calc(50% + 2px); background:#4c6173; display:block; }
.wide_tp .ttt_1 > span::after { content:""; width: 4px; left: auto; right:6px; height:6px; position:absolute; top:calc(50% + 2px); background:#4c6173; display:block; }
.bottom_teeth_table .wide_ts .ttt_1 > span::after, .bottom_teeth_table .wide_ts.wide_tp .ttt_1::before, .bottom_teeth_table .wide_tp .ttt_1 > span::after { top:calc(50% - 8px); }
.tooth_number { display:block; text-align:center; font-weight:500; font-size:13px; color:#666; }
.bottom_teeth_table .tooth_number { padding-bottom:5px; padding-top:8px; }
.top_teeth_table .tooth_number { padding-top:5px; padding-bottom:8px; }