:root {
    --ubr_color: #df2728;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Tahoma', 'Geneva', 'Arial', sans-serif;
    font-size: 11pt;
    color: #3a342e;
    text-decoration: none; 
    overflow-x: hidden;
    text-align: left;
    background-color: white;
}
a:link {
    color:white;
}
a:visited {
    color:white;
}
a:hover {
    color:white;
}
a:active {
    color:white;
}

.guest_library_preview_div_port { float:left; margin:8px; width:243px; border:1px solid darkgray; border-radius:10px; overflow:hidden; color:darkgray; font-size:12pt; cursor:pointer; }
.guest_library_preview_div_port:hover { border:3px solid var(--ubr_color); margin:6px; color:var(--ubr_color); }

.guest_library_preview_div_land { float:left; margin:8px; width:243px; border:1px solid darkgray; border-radius:10px; overflow:hidden;color:darkgray; font-size:12pt; cursor:pointer; }
.guest_library_preview_div_land:hover { border:3px solid var(--ubr_color); margin:6px; color:var(--ubr_color);}

.hidden { display:none; }

.image_library_preview_div { float:left; margin:0; width:162px; cursor:pointer; background-color:white; }
.image_library_preview_div_click { float:left; margin:0; width:648px; background-color:var(--ubr_color); }

.image_library_preview_over_image { position:absolute; top:0; left:0; width:162px; }

.image_library_preview_label { float:left; padding:1px 8px 1px 8px; background-color:white; color:gray; border-top-right-radius:5px; border-top-left-radius:5px; border:1px solid lightgray; border-bottom:0 solid white; }
.image_library_preview_label_over { background-color:var(--ubr_color); color:white; border:1px solid var(--ubr_color); border-bottom:0 solid white; }

.image_library_preview_image { position:absolute; top:0; left:0; }
.image_library_preview_image_over {  }

.katrisa_sm { width:162px; height:243px; }
.katrisa { width:324px; height:486px; }

.preview_info_panel {
    float: left;
    width: 300px;
    padding: 12px;
    background-color: white;
    border: 1px solid lightgray;
    border-left: 1px solid white;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.login_button {
    float: left;
    padding: 3px 8px;
    border: 1px solid darkgray;
    background-color: white;
    color: darkgray;
    border-radius: 6px;
    cursor: pointer;
}

.login_button:hover {
    border: 1px solid var(--ubr_color);
    background-color:var(--ubr_color);
    color: white;
}

.ubr_text_field {
    padding: 5px 12px;
    font-size: 14px;
    line-height: 20px;
    color: #24292e;
    vertical-align: middle;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: right 8px center;
    border: 1px solid darkgray;
    border-radius: 6px;
    outline: none;
    box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 0 inset;
}

.ubr_text_field:focus {
        border-color: var(--ubr_color);
        outline: none;
        /*box-shadow: rgba(3, 102, 214, 0.3) 0 0 0 3px;*/
    }

.login_label {
    float: left;
    margin: 2px 0 0 10px;
    width: 100%;
    color: darkgray;
}

.login_message_div {
    float: left;
    margin: 4px 0 0 10px;
    width: 100%;
    color: var(--ubr_color);
}

.error_message {
    color: var(--ubr_color);
}

.login_message {
    color: lightgray;
}

.i_button { float:left; color:black; background-color:lightgray; padding:2px 8px 1px 8px; font-family:'Lato', sans-serif; font-weight:400; font-size:12px; margin-right:3px; cursor:pointer; border-radius:4px; border-right:1px solid black; border-bottom:1px solid black; }
.i_button:hover { background-color:tomato; color:white; }
.a_button { color:white; background-color:var(--ubr_color); float:left; padding:2px 8px 1px 8px; font-family:'Lato', sans-serif; font-weight:400; font-size:12px; margin-right:3px; border-radius:4px; border-right:1px solid black; border-bottom:1px solid black; }