@import "root.css";
@import "footer.css";

* { margin: 0; padding: 0; box-sizing: border-box; list-style: none; }


body {
    background: var(--primary-bg);
    padding: 24px 0 0 0;
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    transition: background 0.1s;
}

a { color: var(--primary-blue); }

nav {
    z-index: 7;
    position: absolute;
    top: 0; right: 0;
    margin: 24px 24px 0 0;
}
nav ul { display: flex; align-items: center; justify-content: center; }
nav ul li { display: flex; align-items: center; margin: 0 4px; }
nav ul li a {
    display: flex; align-items: center; justify-content: center;
    font: 600 14px/22px "Inter", serif;
    color: #022352; text-decoration: none;
    padding: 8px 20px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s linear 0s;
}
nav ul li:not(:first-of-type):before { content: ""; display: block; width: 1px; height: 10px; background: rgba(2,35,82,0.3); }
nav ul li a span { font-size: 20px !important; line-height: 22px; margin-right: 4px; }

nav ul li a:hover {
    border-bottom: 2px solid #022352;
}

header {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: calc(100% - 40px); margin: 0 auto;
    transition: all 0.2s linear 0s;
}
header h1 img { display: block; width: auto; height: 32px; }
header #global_back {
    position: absolute; left: 0; margin: 0 0 0 15px;
    color: #000;
}
header #global_back span { font-size: 32px; }
header #global_side_menu_trigger {
    position: absolute;
    right: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background: #fff;
    transition: background 0.1s;
}
header #global_side_menu_trigger:hover {
    cursor: pointer;
    background: rgba(0,0,0,0.1);
}

section.subheader {
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    margin: 40px 0 25px 0;
}

section.subheader h2 {
    font: 100 30px/35px "Inter", serif;
}

section.subheader p {
    display: block;
    font: 400 14px/16px "Inter", serif;
    margin: 10px 0 0 0;
}

section.subheader p a { color: var(--primary-blue); }

section.register_steps_indicator {
    display: flex; align-items: center; justify-content: center;
    margin: 0 0 15px 0;
}

section.register_steps_indicator .rsi_step {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 100%;
    background: #fff;
    color: #888;
}
section.register_steps_indicator .rsi_current {
    background: var(--primary-blue); color: #fff;
}
section.register_steps_indicator .rsi_current.green { background: var(--primary-green); }
section.register_steps_indicator .rsi_arrow {
    position: relative; margin: 0 5px;
    display: block;
    width: 50px; height: 1px;
    background: #888;
}
section.register_steps_indicator .rsi_arrow:before,
section.register_steps_indicator .rsi_arrow:after {
    content: "";
    width: 5px; height: 1px;
    background: #888;
    position: absolute; right: 0;
}
section.register_steps_indicator .rsi_arrow:before {
    transform: rotate(45deg); top: -2px;
}
section.register_steps_indicator .rsi_arrow:after {
    transform: rotate(-45deg); top: 2px;
}


.form-container {
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
}

.footer-container {
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
}

.footer-container { display: block; margin-top: 48px; }
.footer-container ul { display: flex; align-items: center; justify-content: center; }
.footer-container ul li { padding: 0 5px; }
.footer-container ul li a { font: 400 16px/18px "Inter", serif; color: var(--primary-blue); }

.temp-menu-holder {
    width: 100%;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    text-align: center;
}
.temp-menu-holder li { padding: 15px; }

/* login, register, etc */
.boxed_content_wrapper {
    width: calc(100% - 50px); margin: 20px auto 0 auto;
}

/* materials and... */
.content_wrapper {
    position: relative;
    display: block; margin: 32px auto 0 auto; 
    width: 100%;
}
#search_materials {
     display: block; width: calc(100% - 32px); margin: 32px auto;
}
#search_materials .search_materials_container {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #eee;
    background: #fff;
}
#search_materials .search_materials_container input {
    display: block;
    width: calc(100% - 44px); height: 42px;
    border-radius: 8px; border: 0;
    margin: 0; padding: 0 15px;
    font-size: 16px;
}
#search_materials .search_materials_container button {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    background: #0B64DD;
    border-radius: 8px; border: 0;
    cursor: pointer;
    transition: 0.5s;
}
#search_materials .search_materials_container button span { color: #fff; font-size: 32px; }
#search_materials .search_materials_container button:hover { background: #000; }

#tags_list {
    display: none;
    position: relative;
    width: calc(100% - 32px); min-height: 80px; height: auto;
    margin: 16px auto 24px auto;
    overflow: hidden;
}

#tags_list.closed .temp_tags_container { max-height: 80px; }
#tags_list .temp_tags_container {
    position: relative;
    display: flex; flex-wrap: wrap; justify-content: center;
    overflow: hidden;
}
#tags_list .temp_tags_container li {
    display: flex;
    font: 500 15px/15px "Inter", serif; color: #666;
    padding: 8px; margin: 0 8px 8px 0;
    background: rgba(255,255,255,0.7);
    border-radius: 16px;
    transition: all 0.1s linear 0s;
    letter-spacing: -0.01em;
}
#tags_list .temp_tags_container li:hover {
    color: #0B64DD; cursor: pointer;
}
#tags_list .temp_tags_container li[data-status="active"] { color: #0B64DD; }
#tags_list .temp_tags_container li[data-status="active"]:before {
    font-family: "Material Symbols Outlined";
    font-size: 16px; line-height: 16px;
    content: "\e5cd";
    margin-right: 4px;
    color: red;
}
#tags_list .temp_tags_container li[data-status="active"]:before:hover {}

#tags_list .tags_more {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    color: #0b64dd;
}
#tags_list .tags_more:hover { cursor: pointer; color: #000; }


#materials_list { display: block; }
#materials_list h2 {
    display: block; width: 100%; margin: 0 auto 10px auto;
    font: 500 22px/24px "Inter", serif; color: #000;
}
#materials_list_container {
    display: none;
    clear: both; overflow: hidden; overflow-x: auto;
    padding: 0;
    padding-bottom: 80px;
}
#materials_list_container > ul {
    display: block; width: 100%;
    margin: 0 auto;
}
#materials_list_container li {
    position: relative;
    display: block; clear: both; overflow: hidden;
    margin: 0 0 8px 0; padding: 8px;
    background: #fff;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
    border-bottom: 1px solid #e1e1e1;
    border-radius: 8px;
    transition: all 0.1s linear 0s;
}
#materials_list_container li:hover {
    box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
}


#materials_list_container li.superItem {
    display: flex; align-items: center; justify-content: center;
    font: 700 24px/24px "Inter", serif; color: #ccc;
}
#materials_list_container li.superItem a {}
#materials_list_container li.superItem a img { width: 100%; height: auto; }

/* #materials_list_container li.superItem:before {
    content: "Reklama";
    position: absolute; top: 0; left: 0;
    margin: 1px 0 0 12px;
    font: 400 10px/10px "Inter", serif; color: #000; text-shadow: 1px 1px 1px #fff;
} */

#materials_list_container li.emptyRequest {
    width: calc(100% - 128px);
    margin: 50px auto;
    padding: 24px;
    font-size: 16px; line-height: 18px; text-align: center;
}
#materials_list_container li.emptyRequest span { font-size: 16px; vertical-align: top; }

#materials_list_container li .material-img {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    float: left;
    width: 150px; height: 150px;
    overflow: hidden;
    border: 1px solid #eee;
    border-radius: 8px;
}
#materials_list_container li .material-img img {
    display: block; width: auto; height: 150px;
}

#materials_list_container li .material-img .toggle_material_to_fav {
    position: absolute; width: 40px; height: 40px;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
    color: #0B64DD;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border-radius: 100%; padding-top: 2px; box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    font-size: 22px;
    border: 2px solid #fff;
}
#materials_list_container li .material-img .toggle_material_to_fav:hover {
    box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
    cursor: pointer;
}
#materials_list_container li .toggle_material_to_clipboard {
    position: absolute; top: calc(50% - 15px); right: 8px;
    width: 32px; height: 32px;
    color: #0B64DD;
    text-align: center; padding-top: 4px;
    background: #fff;
    border-radius: 100%; box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    transition: all 0.1s linear 0s;
    font-size: 22px;
}
#materials_list_container li .toggle_material_to_clipboard:hover {
    box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
    cursor: pointer;
}
#materials_list_container li .toggle_material_to_clipboard:before {
    font-family: "Material Symbols Outlined";
    font-size: 24px; line-height: 24px;
    transition: 0.5s;
}
#materials_list_container li[data-clipboard="false"] .toggle_material_to_clipboard:before { 
    content: "\e145";
}
#materials_list_container li[data-clipboard="true"] .toggle_material_to_clipboard {
    background: #4caf50;
}
#materials_list_container li[data-clipboard="true"] .toggle_material_to_clipboard:before { 
    content: "\e5ca"; color: #fff;
}
#materials_list_container li[data-favorite="true"] .material-img .toggle_material_to_fav { background: #4caf50; color: #fff; }
#materials_list_container li[data-favorite="false"] .material-img .toggle_material_to_fav { border-color: #0B64DD; }


.toggle_material_desktop_wrapper {
    position: absolute; bottom: 16px; right: 16px;
    display: flex; align-items: center; justify-content: flex-start;
    

}
.toggle_material_to_fav2,
.toggle_material_to_clipboard2 {
    opacity: 0.7;
    display: flex; align-items: center; justify-content: flex-start;
    color: #0B64DD;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.1s linear 0s;
    font-size: 14px; font-weight: 500;
    cursor: pointer;
}
.toggle_material_to_clipboard2 { font-size: 16px; opacity: 0.9; }

    .temp_materials_container li:hover .toggle_material_to_fav2,
    .temp_materials_container li:hover .toggle_material_to_clipboard2
    { opacity: 1; }

    .toggle_material_to_fav2:hover,
    .toggle_material_to_clipboard2:hover {
        background: rgba(11, 100, 221, 0.2); 
    }
    #materials_list_container li[data-favorite="true"] .toggle_material_to_fav2:hover,
    #materials_list_container li[data-clipboard="true"] .toggle_material_to_clipboard2:hover {
        background: rgba(80, 152, 77, 0.2); 
    }

.toggle_material_to_fav2 { margin-right: 16px; }

.toggle_material_to_fav2:before,
.toggle_material_to_clipboard2:before {
    font-family: "Material Symbols Outlined";
    font-size: 22px;
    line-height: 22px;
    margin: 0 4px 0 0;
}


#materials_list_container li[data-favorite="true"] .toggle_material_to_fav2,
#materials_list_container li[data-clipboard="true"] .toggle_material_to_clipboard2 {
    color: #50984D; font-weight: 600;
}



#materials_list_container li[data-favorite="false"] .toggle_material_to_fav2:before
{ content: "\f884"; }

#materials_list_container li[data-favorite="true"] .toggle_material_to_fav2:before
{ content: "\f884"; }

#materials_list_container li[data-clipboard="false"] .toggle_material_to_clipboard2:before
{ content: "\e145"; }

#materials_list_container li[data-clipboard="true"] .toggle_material_to_clipboard2:before
{ content: "\e5ca"; }


#materials_list_container li .material-title {
    display: inline-block; vertical-align: top;
    width: calc(100% - 176px);
    font: 600 16px/18px "Inter", serif;
    margin: 8px 0 0 8px;
}
#materials_list_container li .material-lead {
    display: inline-block; vertical-align: top; overflow: hidden;
    width: calc(100% - 150px - 46px); max-height: calc(5 * 19px);
    box-sizing: content-box; padding: 8px 0 0 8px;
    font: 400 13px/19px "Inter", serif;
    letter-spacing: -0.02em;
}

#interaction_block {
    display: none;
    z-index: 7;
    position: fixed; bottom: 0; left: 0;
    width: 100%; height: 70px;
    background: #0B64DD;
}
#interaction_block ul {
    display: flex; align-items: center; justify-content: space-evenly;
    width: 100%; height: 70px;
}
#interaction_block ul li {
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    width: 50%; height: 70px;
    font-size: 14px; color: #fff;

    transition: all 0.1s linear 0s;
}
#interaction_block ul li a { color: #fff; text-decoration: none; text-align: center; }

#interaction_block ul li:hover {
    background: rgba(0,0,0,0.15);
    cursor: pointer;
}
#interaction_block ul li span { display: block; }

#interaction_block ul li:first-of-type {
    border-right: 2px solid #fff;
}
#interaction_block ul li.ib_inactive { opacity: 0.4; }

#interaction_block ul li#ib_shr span { position: relative; }
#interaction_block ul li#ib_shr obj {
    position: absolute; top: 0; right: 0; margin: -5px -15px 0 0;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: #0B64DD; font: 700 14px/14px "Inter", serif;
    border-radius: 100%;
}


.temp_materials_container .material-title,
.temp_materials_container .material-lead {
    cursor: pointer;
}


/* Favorites interface */
#favorites_list {
    display: block;
    width: calc(100% - 40px);
    margin: 0 auto;
}
#favorites_list h2 {
    display: block; margin: 0 0 30px 0;
    font: 700 26px/26px "Inter", serif;
}
#favorites_list h3 {
    display: block;
    font: 600 18px/20px "Inter", serif;
    color: #0B64DD;
}
#favorites_list .fav_form_container {
    display: block; width: 100%; height: auto;
    margin: 20px 0;
}
#favorites_list .fav_form_container label {
    position: relative;
    display: flex; align-items: center; justify-content: flex-start;
}
#favorites_list .fav_form_container label input {
    display: inline-block; vertical-align: top;
    width: 50%; height: 40px;
    border: 2px solid #0B64DD;
    border-radius: 8px;
    padding: 0 15px; text-align: center;
    font-size: 16px;
}
#favorites_list .fav_form_container label button {
    display: inline-block; vertical-align: top;
    width: 40px; height: 40px; margin: 0 0 0 8px;
    border: 0; border-radius: 8px;
    background: #0B64DD;
    transition: 0.3s;
    cursor: pointer;
}
#favorites_list .fav_form_container label button span { color: #fff; }
#favorites_list .fav_form_container label button:hover { background: #000; }

#favorites_list_container {}
#favorites_list_container ul {}
#favorites_list_container ul li {
    display: flex; align-items: center;
    width: 100%; height: auto;
    background: #fff;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.1);
    border: 0; border-radius: 8px;
    margin: 0 0 10px 0; padding: 8px 16px;
    font: 500 15px/15px "Inter", serif; color: #222;
    transition: 0.3s;
}
#favorites_list_container ul li:hover {
    cursor: pointer; background: rgba(11,100,221,1); color: #fff;
}
#favorites_list_container ul li span { font-size: 22px; margin-right: 8px; }
#favorites_list_container ul li i { font-style: normal; color: #999; font-size: 14px; margin-left: 4px; }
#favorites_list_container ul li[data-archived-status="1"] span { color: red; }

.materials_static_content {
    display: block; position: relative; clear: both; overflow: hidden;
    width: calc(100% - 32px); height: auto; padding: 16px; margin: 128px auto 0 auto;
    background: #fff; box-shadow: 0px 0px 25px rgba(0,0,0,0.15);
}
.materials_static_content .quatro_block {
    display: flex; align-items: flex-start; justify-content: center;
    flex-direction: column;
    width: 100%; max-width: 1200px; margin: 0 auto;
}
.materials_static_content .quatro_block .quatro_item:not(:first-of-type) {
    margin-top: 32px;
}
.materials_static_content .quatro_block .quatro_item {
    display: block; width: 100%;
}
.materials_static_content .quatro_block .quatro_item h4 {
    font: 700 15px/15px "Inter", serif;
    color: #022352;
}
.materials_static_content .quatro_block .quatro_item h4 span { vertical-align: sub; font-size: 20px; }
.materials_static_content .quatro_block .quatro_item p {
    color: #666;
    margin-top: 8px;
    font: 400 14px / 20px "Inter", serif; text-align: left;
}


#hcp_logout { padding: 8px; margin: 0 0 0 24px; }
#hcp_logout:hover { border-radius: 100%; background: rgba(255,0,0,0.1); cursor: pointer; }

#scrollTop { display: none; }

.activation_container { display: block; text-align: center; font: 500 16px/16px "Inter", serif; }

.nil-label {
    display: block; margin: 0 0 16px 0;
    font: 400 italic 12px/14px "Inter", serif; color: #888;
}
.nil-logo {
    display: block; text-align: center;
}
.nil-logo img { width: auto; max-width: 100%; margin: 0 auto; }
.smsNotPossible { display: block; text-align: center; color: red; }


/* HCP Proposals 12.2024 */
#proposal_content .form-container {
    margin: 32px 0; padding: 32px 48px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
#proposal_content h2 {
    display: block;
    margin: 0 0 30px 0;
    font: 700 26px/26px "Inter", serif;
}
.proposal-lead {
    display: block;
    font: 400 16px/24px "Inter", serif; color: #444;
}
.proposal-lead #hide_me {
    display: block;
    padding: 16px; font-size: 24px; text-align: center; color: var(--primary-green);
}

#proposalForm input[type="file"] {
    display: none;
}

#proposalForm label[for="proposal_file"] {
    display: flex; align-items: center; justify-content: center;
    width: 160px; height: 40px;
    margin: 0 0 32px 0;
    border-radius: 8px;
    background: #2C85FF;
    font: 400 16px/16px "Inter", serif; color: #fff;

    transition: all 0.1s linear 0s;
}
#proposalForm label[for="proposal_file"] > .material-symbols-outlined { margin-right: 10px; }
#proposalForm label[for="proposal_file"]:hover {
    cursor: pointer;
    background: var(--primary-blue);
}
.form-item .file_pre_label {
    display: block; margin-bottom: 4px;
    font: 500 13px / 13px "Inter", serif; color: #999;
}
#proposalForm label[for="proposal_file"] .alert { margin-top: 40px; }
.form-item [for="proposal_agreement1"] {
    display: block;
    font-size: 16px; line-height: 16px; color: #222;
    margin: 16px 0;
}
.form-item [name="proposal_agreement1"] {
    margin-top: 1px !important;
}
.form-item [for="proposal_agreement1"] .alert { position: relative; margin: 0; }