/*
 *
 * GLOBAL VRIABLES
 *
 */
 :root {
    /* Variable to be set by app */
    --scale_factor: 1;
}


body {
    margin: 0;
}
.draggable_element {
    cursor:move;
}
.spacer {
    height:5px;
    background-color: grey;
    width: 100%;
}

.app_button {
    border: 1px solid gray;
}
.link {
    color: blue;
}

/* POP-UPs (pop-up and cover message) */
#page_cover_message {
    position: absolute;
    top: 200px;
    left: 200px;
    width: 300px;
    height: 300px;
    background-color: green;
    display: none;
    z-index: 1000;
}
#page_cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0.5;
    z-index: 100;
    display: none;
}

/*
 * MOBILE PAGE
 */
/*.mobile_element {
    width: 100%;
    display: block;
}*/
#public_area_mobile {
    background: #F6F6F6;
}
.mobile_element {
    width: 100%;
    display: flex;
}
.mobile_logo {
    width: 35%;
    height: intrinsic;
    margin-left: auto;
    margin-right: auto;
}
.mobile_font_small {
    font-size: 5.1vw; /* percentage of viewport width */
}
.mobile_font_large {
    font-size: 8.5vw; /* percentage of viewport width */
}
.mobile_text_center {
    text-align: center;
}
.mobile_font_400 {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    color: #142A5B;
}
.mobile_font_700 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}
.mobile_font_blue {
    color: #142A5B;
}
.mobile_font_white {
    color: #ffffff;
}
.mobile_font_gray {
    color: #142A5B;
    opacity: 0.5;
}
#mobile_blue_background {
    position: absolute;
    width: 100%;
    /*height: 348vw;*/
    height: 100%;
}
.app_store {
    width: 45%;
    height: intrinsic;
   /* height: fit-content; doens`t work on mac */
    margin-left: auto;
    margin-right: auto;
}
.image_90 {
    width: 90%;
    height: intrinsic;
    margin-left: auto;
    margin-right: auto;
}
.image_70 {
    width: 70%;
    height: intrinsic;
 /* height: fit-content; doens`t work on mac */
    margin-left: auto;
    margin-right: auto;
}
.separator {
    width: 90%;
    height: 1px;
    background: #979797;
    margin-left: auto;
    margin-right: auto;
}
.in_front {
    z-index: 10;
}
/* link to apple store and google play */
.apple {
    display: none;
}
.android {
    display: none
}
.mobile_white_box {
    /*position: absolute;*/
    width: 90%;
    /*height: 144vw; /*709px;*/
    /*left: 20px;
    top: 2286px;*/
    background: #FFFFFF;
    box-shadow: 0px 30px 59px rgba(59, 133, 255, 0.180398);
    border-radius: 11px;
    margin-left: auto;
    margin-right: auto;
}

/*
 * PUBLIC PAGE
 */
/* GENERAL */
.public_input {
    width: 100%;
}
button:hover {
    cursor: pointer;
}
.error_message {
    color: red;
    width: 100%;
}
/* LOGO */
#logo {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 50px;
}
/* SIGN IN */
#sign_in_form {
    position: absolute;
    top: 100px;
    right: 100px;
    width: 500px;
    background-color: #f0f0f0;
    border: 1px black solid;
    padding: 5px;
}
#sign_in_username {
    margin-bottom: 10px;
}
#sign_in_password {
    margin-bottom: 10px;
}
#sign_in_button {
    color: white;
    background-color: grey;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}
#sign_in_button:disabled {
    cursor: default;
}
/* FORGOT PASSWORD */
#forgot_password_form {
    display: none;
}
#forgot_password {
    color:#0000f0;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}
#forgot_password:hover {
    color:#0000ff;
    /*color: lightblue;*/
/*    cursor: pointer;*/
}
/* FORGOT PASSWORD VERIFICATION */
#forgot_password_verification_form {
    display: none;
}
#forgot_password_confirmation {
    display: none;
}

/* SING UP */
#sign_up {
    color: white;
    background-color: blue;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}
#sign_up_form {
    display: none;
}
/* POP-UP FORMS */
.public_form {
    position: absolute;
    top: 200px;
    left: 200px;
    width: 300px;
    height: 400px;
    background-color: #d0d0d0;
    z-index: 1000;
}
/* SEARCH */
#search {
    position: absolute;
    left: 150px;
    top: 330px;
    width: 326px;
    height: 40px;
    background-color: #000000;/* #ffffff;*/
    border-radius: 6px;
    border: 1px solid #34383c;
    box-sizing: border-box;
    z-index: 0;
}
#search_field {
    position: absolute;
    left: 190px;
    top: 334px;
    width: 260px;
    height: 25px;
    z-index: 10;
}
#search_button {
    position: absolute;
    left: 150px;
    top: 380px;
    width: 326px;
    height: 30px;
    z-index: 0;
}
#search_magnifying_glass {
    position: absolute;
    left: 155px;
    top: 336px;
    height: 28px;
    z-index: 10;
}
/* MESSAGES */
#message1 {
    position: absolute;
    left: 10px;
    top: 450px;
}
#message2 {
    position: absolute;
    right: 10px;
    top: 550px;
}
#message3 {
    position: absolute;
    left: 10px;
    top: 650px;
}
.front_page_mesaage {
    font-size: 20px;
}

/*
 * AREAS
 */
#public_area {
    display: none;
}
#private_area {
    display: none;
}


/*
 * PROFILE PAGE (SINGED-IN)
 */
#field_selection {
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: #a0a0a0;
}
#field_selection {
    display: none; 
}
#field_selection_header {
    width:100%;
    height: 40px;
    background-color: green;
}
#profile_image {
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
}
#photoupload {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;  
    display: none;
}
#business_card {
    width: 100%;
    background-color: grey;
}
.business_card_key {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100px;
    margin-right: 10px;
}
.business_card_value {
    width: 400px;
}
.business_card_textarea {
    height: 150px;
}
.business_card_delete {
    width: 15px;
    height: 15px;
}
#manage_changes {
    margin-top: 20px;
}



/*
 *  SETTINGS PAGE (SIGNED-IN)
 */
#delete_account_form {
    display: none;
}
#settings_change_password_error {
    display: none;
}
#settings_password {
    width: 300px;
}

/*
 *   SignUp verficiation code screen
 */

#sign_up_verification {
    /*position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
    background-color: #444444;
    color: white;*/
    display: none;
}
#verficiation_code_close {
    position: absolute;
    right: 10px;
    top: 10px;
}
.icon {
    height: 20px;
    width: 20px;
}
#verification_code {
    position: absolute;
    top: 50px;
    left: 10px;
    width: 180px;
}
#verficiation_code_submit {
    position: absolute;
    left: 10px;
    top: 100px;
}



/*
 *  Overview page
 */
/*.contact {
    
}*/
.contact_user_name {
    width: 200px;
    display: inline-block;
}
.contact_card_name {
    width: 150px;
    display: inline-block;
}
.contact_button {
    width: 100px;
    margin-left: 5px;
    margin-right: 5px;
}
#contacts_table_contacts {
    position: absolute;
    left: 0;
    top: 120px;
}
#contacts_table_shared_card {
    position: absolute;
    left: 200px;
    top: 120px;
}
#contacts {
    position: absolute;
    top: calc(120px + 30px);
    left: 0px;
}
#contacts_download {
    position: absolute;
    bottom: 200px;
    left: 0px;
}
.contact_business_card {
    position: absolute;
    top: 150px;
    left: 100px;
    background-color: #d0d0d0;
    /*width: 200px;*/
    display: none;
    z-index: 100;
    padding: 5px;
}

/*
 *  HEADER BUTTONS
 */
.header_button {
    border: none;
    padding: none;
    padding: 0;
    background: 0;
}
.close_button {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    padding: none;
    background: 0;
    outline: none;
}
.close_button:hover {
    fill: red;
    opacity: 0.5;
}


/*
 *  MENU
 */
#menu {
    position: absolute;
    right: 10px;
    top: 10px;
    width: calc(89px * var(--scale_factor));
}
#menu_selection {
    position: absolute;
    right: 0;
    top: 0;
}
#menu_img {
    width: 30px;
    height: 30px;
}
#menu_content {
    position: absolute;
    right:0;
    top: 50px; /* Same value as menu_img */
    width: 100%;
    display: none;
}
/*#menu:hover #menu_content {
    display: block;
}*/
.menu_element {
  /*  font-family: "Inter", sans-serif;
    font-size: var(--font_size_11);*/
    background-color: #808080;
    color: #c0c0c0;
    width: 100%;
    padding: calc(4px * var(--scale_factor));
    opacity: 1.0;
    border: none;
    outline: none;
    text-align: left;
}
.menu_element:hover {
    background-color: #a0a0a0;
    color: #ffffff;
}


/*
 *  POP-UP WINDOW
 */
#pop_up {
    position: absolute;
    left: 200px;
    top: 400px;
    width: 200px;
    height: 200px;
    background-color: grey;
    z-index: 1000;
    display: none;
}