.pod_wrapper{
    border: 1px solid gray;
    padding: 10px;
}
.myrow{
    display: flex;
    justify-content: space-between;
    margin: 30px 0px;
    align-items: center;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da!important;
    border-radius: 0.25rem!important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn{
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}
.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
.btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}
#table_rashet th, #table_rashet td, #table_koeffs th, #table_koeffs td {
    text-align: center;
    width: 10%;
    border: 1px solid gray;
    padding: 10px;
}
select{
    min-width: 100px;
    max-width: 300px;
}
.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.btn-outline-primary {
    color: #0d6efd;
    border-color: #0d6efd;
}
.btn-outline-primary:hover{
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}
.btn-success {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}
.btn-success:hover {
    color: #fff;
    background-color: #157347;
    border-color: #146c43;
}
#add_driver{
    margin-top: 20px;
}
.myrow3 > div{
    width: 30%;
}
#category_ts{
    width: 100%;
}
.mycircle{
    width: 20px;
    height: 20px;
    border: 2px solid #198754;
    border-radius: 50%;
    cursor: pointer;
}
.myflex{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
.mycirclefull{
    background: #198754;
}
.mycircle_blue{
    width: 40px;
    height: 40px;
    border: 2px solid #06a3ca;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-weight: 600;
    margin: 3px;
}
.mycircle_blue_small{
    width: 20px;
    height: 20px;
}
.mycircle_blue_full, .mycircle_blue:hover{
    background: #06a3ca;
    color: white;
}
#debag_info, #resp_info{
    border: 1px solid gray;
    padding: 10px;
    border-radius: 10px;
    width: 50%;
}
.mark_list_elem, .model_list_elem, .single_owner, .single_driver, .name_strah_find_list_elem{
    cursor: pointer;
    padding: 3px;
    border-radius: 5px;
}
.mark_list_elem:hover, .model_list_elem:hover, .single_owner:hover, .single_driver:hover, .name_strah_find_list_elem:hover{
    background: #157347;
    color:white;
    border-radius: 5px;
}
#sear_mark_list, #sear_mark_list, #list_owners, #list_drivers{
    position: absolute;
    z-index: 99;
    background: lightgreen;
    width: 200px;
    border-radius: 5px;
}
#search_owners{
    width: 400px;
}
#clear_owner{
    width: 50px;
    position: absolute;
    right: -40px;
    top: 18px;
    cursor: pointer;
}
#online_owner_adress{
    cursor: pointer;
}
#owner_adress{
    width: 1000px;
}
#massa_car_wrap, #kol_mest_car_wrap{
    display: none;
}
.btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
}
.btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}
.btn-warning:hover {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
}
.btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}
.btn-dark:hover {
    color: #fff;
    background-color: #23272b;
    border-color: #1d2124;
}
.btn-new {
    color: #fff;
    background-color: #06a3ca;
    border-color: #a3dfee;
}
.btn-new:hover {
    color: #fff;
    background-color: #1e5e6e;
    border-color: #a3dfee;
}

#wrap_buttons_home{
    display:flex;
}
#wrap_buttons_home button{
    margin: 0px 5px;
}
.single_car, .single_raschet_ur, .single_raschet_kasko {
    display: flex;
    margin-bottom: 10px;
    text-align: center;
}
.header_cars, .header_raschet_ur, .header_raschet_kasko {
    padding: 5px;
    background: gold!important;
}
#body_cars, #body_raschet_ur, #body_raschet_kasko {
    min-width: 700px;
}
.single_car > div, .single_raschet_ur > div, .single_raschet_kasko > div {
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
}
.single_car:hover{
    background: lightgray;
}
.lightpink{
    background: lightpink;
}
#resp_strah th, #resp_strah td, #resp_strah_kasko th, #resp_strah_kasko td {
    text-align: center;
    width: 10%;
    border: 1px solid gray;
    padding: 10px;
}
#debag_info_wrap{
    display: flex;
}
#open_man{
    cursor: pointer;
}
#table_autos_owner, #table_cars_owner{
    width: 100%;
}
#table_autos_owner th, #table_autos_owner td, #table_cars_owner th, #table_cars_owner td{
    border: 1px solid lightgray;
    text-align: center;
    padding: 10px;
}
.remove_auto, .remove_auto_doc{
    zoom: 0.6;
    margin-left: 20px;
}
.polis_auto_single{
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    border-top: 1px solid lightgray;
    padding-top: 10px;
    align-items: center;
}
.polis_auto_single a:hover{
    text-decoration: underline;
}
.document_auto{
    zoom: 0.8;
}
.owner_car_tr a{
    color: #007bff;
}
.owner_car_tr a:hover{
    text-decoration: underline;
}
.li_owner_komm{
    display: flex;
    align-items: center;
}

.li_owner_komm > div{
    margin: 5px;
}
.custom_remove{
    background: #DEB887;
}
.create_new_polis{
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
}
.tr_auto{
    vertical-align: top;
}
.wrap_owner_komm_txt{
    width: 70%;
}
.error_element{
    border-color: red!important;
}
.mycirclered{
    background: red;
    border: red;
}
.info_addr{
    display: none;
    background: white;
    z-index: 99999;
}
.addr:hover .info_addr{
    display: block;
}
.card_auto_polis{
    padding: 5px;
    box-shadow: grey 2px 2px 1px 1px;
    border-radius: 5px;
    margin: 5px;
    border: 1px solid grey;
    position: relative;
}
.create_date_calendar_line{
    position: absolute;
    bottom: 0px;
    left: -80px;
    max-width: 80px;
    font-size: 14px;
    border-bottom: 1px solid gray;
    color: gray;
}
.card_auto_polis_head{
    display: flex;
    justify-content: space-around;
}
.name_strah_find_list{
    position: absolute;
    z-index: 999;
    left: calc(50% - 100px);
    width: 200px;
    background: white;
}
#wrap_calendar_last, #wrap_calendar_future, #wrap_polises_loaded{
    width: 46%;
    text-align: center;
}
.card_auto_polis_wrap_add_komment{
    margin: 10px 0px;
    display: flex;
    justify-content: center;
}
.card_auto_polis_wrap_add_komment > button{
    margin-left: 10px;
}
#footer{
    margin: auto;
    max-width: 1216px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
}
#footer a:hover{
    text-decoration: underline;
}
#kooki {
    position: fixed;
    bottom: 5px;
    background: lightgrey;
    padding: 15px;
    width: 100%;
    float: none;
    max-width: 850px;
    left: 10px;
    border-radius: 5px;
}
#close_kooki {
    cursor: pointer;
    font-weight: 600;
    position: absolute;
    top: 5px;
    right: 5px;
    margin: 5px;
    background: white;
    padding: 5px;
}
.card_auto_polis_dat{
    text-align: left;
    font-weight: 600;
}
#wrap_grafik_analitik{
    display: flex;
    flex-wrap: wrap;
}
.card_grafik_analitik{
    padding: 10px;
    border: 1px solid gray;
    width: calc(50% - 40px);
    margin: 10px;
}
.card_grafik_analitik_body{
    height: 300px;
    width: 500px;
    margin: auto;
    text-align: center;
}
.card_grafik_analitik_head{
    margin-bottom: 10px;
    text-align: center;
    font-weight: 600;
}
.card_grafik_analitik_body img{
    display: block;
    margin: auto;
}
.square{
    width: 25px;
    height: 25px;
    margin-right: 10px;
}
.square_green{
    background: #00923f;
}
.square_violet{
    background: #29166f;
}
.square_blue{
    background: #0093dd;
}
.square_red{
    background: red;
}
.square_gray{
    background: gray;
}
.legend_grafik_sin{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.card_auto_polis_sin_komment > span{
    margin-right: 15px;
}
.block_r{
    display: flex;
    padding: 10px;
    border: 2px solid lightgray;
    border-radius: 5px;
    margin-bottom: 10px;
    justify-content: space-around;
    align-items: center;
}
#refka{
    margin-left: 10px;
    background: black;
    padding: 5px;
    color: wheat;
    border-radius: 3px;
    cursor: pointer;
}
#req_table, #char_table{
    width: 100%;
}
#req_table td, #char_table td{
    text-align: center;
}
.block_r input {
    height: max-content;
}
#change_password{
    min-width: 150px;
}
.logo_strah{
    width: 200px;
    margin: auto;
}
#sub_mnu_calendar{
    display: flex;
    justify-content: center;
}
.tab_polises{
    display: none;
    justify-content: space-around;
}
.tab_polises_active{
    display: flex;
}
.sub_mnu_calendar_item{
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    color: gray;
    cursor: pointer;
    margin: 0px 10px;
    padding: 10px;
    border: 1px solid #007bff;
    border-radius: 5px;
}
.sub_mnu_calendar_item_active {
    color: black;
}
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}
#wrap_polises_loaded{
    margin-left: 30px;
}
.calendar_notify{
    font-size: 14px;
}
.calendar_notify button{
    margin-left: 30px;
}
#header_logo{
    width: 100px;
}
.progress{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    margin-top: 10px;
}
.progress-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    background-color: #007bff;
    transition: width .6s ease;
}
.bg-success {
    background-color: #28a745 !important;
}
#home_logo{
    display: block;
    margin: auto;
    width: 200px;
}
.upsale_li{
    font-size: 12px;
    text-align: left;
    margin-bottom: 5px;
}
.home_wrap_video{
    display: flex;
    justify-content: center;
    margin: 20px auto;
}
#home_wrap{
    margin: auto;
    max-width: 1200px;
    background: white;
    padding: 15px;
    margin-top: 5px;
    border-radius: 10px;
}
#home_head{
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 30px;
}
#home_logo_href{
    margin-right: auto;
}

.info_tr_insapp{
    display: flex;
    align-items: center;
}
.info_td_insapp{
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.disabled{
    opacity: 0.6;
}
.anonim_checkbox_agree{
    margin-right: 8px;
}
#until_strahovie{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
#until_strahovie_txt{
    text-align: center;
}
#until_strahovie_img{
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    width: 200px;
}
#wrap_buttons_home_ur{
    display: flex;
    justify-content: center;
}
#raschet_ur{
    margin-right: auto;
}
#name_ur{
    width: 500px;
}
#adress_ur{
    width: 100%;
}
#footer_social_img{
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    width: 200px;
}
#footer_social{
    text-align: center;
}
.sin_pag{
    margin: 5px;
    padding: 5px;
    border: 1px solid gray;
    cursor: pointer;
}
#pagination_people{
    margin-top: 20px;
}
#search_gos_number{
    margin-top: 35px;
    float: right;
}
#check_is_taxi{
    margin-top: 5px;
    float: right;
}
#seria_pts_wrap{
    margin-right: 10px;
}
#search_gos_number_new{
    margin-left: 10px;
}
.resave_action{
    cursor: pointer;
    padding: 5px;
}
.resave_action:hover{
    background: white;
    color: black;
}
.set_design{
    cursor: pointer;
    float: right;
    margin: 12px;
    margin-top: -20px;
}
.set_design:hover{
    border-bottom: 1px solid gray;
}
.find_driver{
    width: 400px;
}
.open_driver{
    cursor: pointer;
}
.clear_driver{
    width: 50px;
    position: absolute;
    left: -3px;
    top: -15px;
    cursor: pointer;
}
.top_wiki{
    text-decoration: underline;
    color: #06a3ca;
    font-size: 16px;
    margin-left: 40px;
}
.price_polis{
    font-size: 18px;
    font-weight: 600;
}
#button_up {
    width: 50px;
    height: 50px;
    transition: 0.4s ease-in-out;
    left: 90%;
    bottom: 90px;
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0.8;
    background: white;
    padding: 10px;
    border-radius: 50%;
    z-index: 999;
    margin-left: -40px;
}
#button_up path {
    fill: #06a3ca;
}
#open_close_main_mnu{
    display: none;
    cursor: pointer;
}
#resp_info{
    word-break: break-all;
}

@media screen and (max-width: 1100px) {
    .sm\:ms-10{
        margin-inline-start: 0px!important;
    }
    .main-mnu > a{
        margin: 3px;
        margin-right: 3px !important;
        margin-left: 3px !important;
        font-size: 12px;
    }
    .main-mnu{
        flex-wrap: wrap;
        height: max-content;
    }
}

@media screen and (max-width: 1000px) {
    .block_r{
        flex-direction: column;
    }
    .mytd:has(#owner_adress), #owner_adress{
        width: 100%;
    }
    .mytd:has(#owner_name), .mytd:has(#driver_name1), .mytd:has(#driver_name2), .mytd:has(#driver_name3), .mytd:has(#driver_name4), .mytd:has(#driver_name5){
        margin-left: 0px !important;
    }
    #wrap_buttons_home{
        flex-wrap: wrap;
    }
    #wrap_buttons_home button{
        margin: 5px 5px;
    }
    #debag_info_wrap{
        flex-direction: column;
    }
    #debag_info, #resp_info{
        width: 100%;
        margin-bottom: 10px;
    }
    #table_koeffs {
        width: 100%;
        border-collapse: collapse;
    }
    #table_koeffs th, #table_koeffs td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
    }
    #table_koeffs th {
        background-color: #f2f2f2;
    }
    #table_koeffs, #table_koeffs tbody, #table_koeffs tr, #table_koeffs td {
        display: block;
        width: 100%;
    }
    #table_koeffs th {
        display: none;
    }
    #table_koeffs td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        border-bottom: 1px solid #ddd; /* Добавим разделитель между строками */
    }
    #table_koeffs td::before {
        content: attr(data-label); /* Используем значение атрибута data-label */
        position: absolute;
        left: 10px;
        width: calc(50% - 10px); /* Ширина с учетом отступа */
        padding-right: 10px;
        text-align: left;
        font-weight: bold;
        white-space: nowrap; /* Запрещаем перенос текста */
        top: 50%; /* Выравниваем по вертикали */
        transform: translateY(-50%); /* Центрируем по вертикали */
    }

    #table_rashet, #table_rashet tbody, #table_rashet tr, #table_rashet td {
        display: block;
        width: 100%;
    }
    #table_rashet th {
        display: none;
    }
    #table_rashet td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        border-bottom: 1px solid #ddd; /* Добавим разделитель между строками */
    }
    #table_rashet td::before {
        content: attr(data-label); /* Используем значение атрибута data-label */
        position: absolute;
        left: 10px;
        width: calc(50% - 10px); /* Ширина с учетом отступа */
        padding-right: 10px;
        text-align: left;
        font-weight: bold;
        white-space: nowrap; /* Запрещаем перенос текста */
        top: 50%; /* Выравниваем по вертикали */
        transform: translateY(-50%); /* Центрируем по вертикали */
    }

    #resp_strah, #resp_strah tbody, #resp_strah tr, #resp_strah td {
        display: block;
        width: 100%;
    }
    #resp_strah th {
        display: none;
    }
    #resp_strah td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        border-bottom: 1px solid #ddd; /* Добавим разделитель между строками */
    }
    #resp_strah td::before {
        content: attr(data-label); /* Используем значение атрибута data-label */
        position: absolute;
        left: 10px;
        width: calc(50% - 10px); /* Ширина с учетом отступа */
        padding-right: 10px;
        text-align: left;
        font-weight: bold;
        white-space: nowrap; /* Запрещаем перенос текста */
        top: 50%; /* Выравниваем по вертикали */
        transform: translateY(-50%); /* Центрируем по вертикали */
    }
    #resp_strah td img.logo_strah {
        display: block;
        margin: 0 auto; /* Центрируем логотип */
        max-width: 80px; /* Уменьшаем размер логотипа для мобильных */
    }
}

@media screen and (max-width: 900px) {
    .myrow{
        flex-wrap: wrap;
    }
    .myrow3 > div{
        width: 100%;
    }
    header{
        margin-top: 40px;
    }
    #koef_komiss{
        width: -webkit-fill-available;
    }
    #footer{
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    #body_cars, #body_raschet_kasko, #body_raschet_ur {
        width: 100%;
        border-collapse: collapse;
    }   
    .single_car, .single_raschet_kasko, .single_raschet_ur {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        border-bottom: 2px solid #ddd;
    }   
    .single_car > div, .single_raschet_kasko > div, .single_raschet_ur > div{
        flex: 1;
        text-align: left;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        width: auto;
    }
    .header_cars, .header_raschet_kasko, .header_raschet_ur {
        display: none!important; 
    }
    .single_car > div::before, .single_raschet_kasko > div::before, .single_raschet_ur > div::before {
        content: attr(data-label);
        font-weight: bold;
        display: inline-block;
        width: 100px;
    }
    .single_car > div > a, .single_raschet_kasko > div > a, .single_raschet_ur > div > a {
        flex: 1;
        text-align: right;
    }
    .mytd:has(#new_owner_auto){
        width: 100% !important;
    }
}

@media screen and (max-width: 640px) {
    #open_close_main_mnu{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20px;
    }
    #main_mnu{
        flex-direction: column;
        background: white;
        z-index: 999;
        border-radius: 5px;
    }
    .myrow{
        flex-wrap: wrap;
    }
    .myrow3 > div{
        width: 100%;
    }
    #wrap_top_buttons{
        margin-top: 10px!important;
    }
    .mytd:has(.find_driver), .mytd:has(#search_owners){
        width: 100%;
    }
    .find_driver, #search_owners{
        max-width: 90%;
    }
    .clear_driver{
        left: -30px;
    }
    #clear_owner{
        right: 0px;
    }
    .myflex:has(#seria_pts_wrap){
        flex-direction: column;
    }
    #table_cars_owner, #table_cars_owner tbody, #table_cars_owner tr, #table_cars_owner td {
        display: block;
        width: 100%;
    }
    #table_autos_owner, #table_autos_owner tbody, #table_autos_owner > tr, .tr_auto > td {
        display: block;
        width: 100%;
    }
    #table_cars_owner_head, #table_autos_owner_head {
        display: none!important;
    }
    #table_cars_owner td, .tr_auto > td {
        padding: 8px;
        border: none;
        border-bottom: 1px solid #ddd;
        position: relative;
        padding-left: 50%;
    }
    #table_cars_owner td::before, .tr_auto > td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
    }
    #table_cars_owner tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
    }
    .polis_auto_single{
        flex-direction: column;
    }
    #table_autos_owner th, #table_autos_owner td, #table_cars_owner th, #table_cars_owner td{
        text-align: right;
    }
}