﻿
#contact_view {
    display: block;
    overflow: auto;
}

#contact_p {
    width: 1090px;
    font-size: 18px;
    color: #4A4A4A;
    line-height: 22px;
    margin: 0 0 57.9px 121px;
}

#contact_p span {
    font-weight: 600
}

#contact_btn_container1 {
    margin: 66.5px 0 0 127px;
}

.contact_btn_container {
    margin: 66.5px 0 0 121px;
}

#contact_info_read_only_container {
    width: 1122px;
    margin: 0 0 0 121px;
}

#read_only_p1, #read_only_p2, #read_only_p3 {
    font-family: 'Roboto Condensed';
    font-size: 20px;
    color: #4a4a4a;
    margin: 0 0 20px 0;
    display: flex;
    word-break:break-word;
}
#read_only_p1 i, #read_only_p2 i, #read_only_p3 i, #read_only_p4a i {
    font-size: 24px;
    color: var(--main-blue-color);
    width: 40px;
    text-align:center;
    padding: 0 15px 0 0;
}

#read_only_p4a {
    font-family: 'Roboto Condensed';
    font-size: 16px;
    color: #4a4a4a;
    margin: 40px 0 0 0;
    display: flex;
}

#read_only_p4b {
    font-family: 'Roboto Condensed';
    font-size: 16px;
    color: #4a4a4a;
    margin: 0 0 0 55px;
}


#contact_editable_wrapper2 {
    width: 831px;
    margin: 0 0 0 121px;
}

#contact_editable_wrapper2 label {
    font-size: 18px;
    font-weight: 200;
    line-height: 20px;
}

.label_row_left {
    display: inline-block;
    width: 390px;
    margin: 0 0 56.8px 0;
}

.label_row_right {
    float: right;
    display: block;
    width: 341px;
    margin: 0 0 56.8px 0;
}

.label_row_different {
    float: right;
    font-size: 18px;
    font-weight: 200;
    line-height: 20px;
    display: block;
    width: 441px;
    margin: 0 0 56.8px 0;
}

.label_row_different div {
    display: inline-block;
}

.label_row_left label, .label_row_right label, .label_row_different label{
    display: block;
}

.input_same1 {
    margin-top: 7.5px;
    width: 341px;
}

.input_row {
    width: 492px;
    display: inline-block;
    position: relative;
    margin: 0 0 56.8px 0;
}

.input_row_type2 {
    display: inline-block;
    margin: 0 0 56.8px 0;
}

#input_row_last {
    position: relative;
}

#contact_updated_message {
    display: flex;
    align-items: center;
    height: 70px;
}

#contact_updated_message p{
    display: inline-block;
    padding: 5px;
    border-radius: 4px;
    color: white;

}

.redBottomBorder {
    border-bottom: 2px solid red;
}

/*#contact_editable_wrapper2 label {

    display: inline-block;
}*/

/*#contact_first_name_label, #contact_email_label, #contact_address1_label {
    display: inline-block;
    margin: 0px 262.4px 0px 0px;
    width: 230px;
}*/

/*#contact_last_name_label, #contact_phone_label, #contact_zip_label {
    width: 230px;
}*/

/*#contact_first_name, #contact_last_name, #contact_email, #contact_phone, #contact_address_1, #contact_address_2 {
    width: 341px;
    height: 34px;
    margin: 7.5px 152.4px 0px 0px;
}*/

#contact_city_label {
    width: 94.1px;
    height: 24px;
    margin: 7.5px 297.7px 0 0;
}

#contact_select_label {
    width: 63.4px;
    height: 24px;
    margin: 7.5px 248.4px 0 0;
}

#contact_city {
    width: 341px;
    height: 34px;
    margin: 7.5px 52.2px 0 0;
}

.input_row div {
    display: inline-block;
}

#contact_state_control_select_0 {
    padding-right: 27px;
    width: 262px;
    height: 34px;
    margin: 7.5px 27px 0 0;
}

#contact_state {
    width: 262px;
    height: 34px;
    margin: 7.5px 27px 0 0;
}

#contact_postal {
    width: 123.5px;
    height: 34px;
    margin: 7.5px 0 0 0;
}

#contact_country_label {
    width: 94.1px;
    height: 24px;
    margin: 7.5px 297.7px 0 0;
}

#contact_country_control_0 {
    padding-right: 28px;
    width: 831px;
    height: 34px;
    margin: 7.5px 0 0 0;
}

/*#contact_country_control_0 span:after {
    position: absolute;
    display: block;
    content: '';
    width: 40px;
    height: 40px;
    background: red;
    border: 10px solid green;
}*/

#try_ing {
    width: 100px;
    height: 10px;
    background: red;
}

#billing_state_span:after {
    position: relative;
    right: 26px;
    display: inline-block;
    content: '';
    width: 15px;
    height: 15px;
    background: white;
    border-left: 4px solid var(--main-blue-color);
    border-bottom: 4px solid var(--main-blue-color);
    border-bottom-left-radius: 4px;
    border-top-right-radius: 100%;
    transform: rotate(-45deg);
}

#state_span_0:after {
    position: relative;
    right: 56px;
    display: inline-block;
    content: '';
    width: 15px;
    height: 15px;
    background: white;
    border-left: 4px solid var(--main-blue-color);
    border-bottom: 4px solid var(--main-blue-color);
    border-bottom-left-radius: 4px;
    border-top-right-radius: 100%;
    transform: rotate(-45deg);
}

.state_span:after {
    position: relative;
    right: 56px;
    display: inline-block;
    content: '';
    width: 15px;
    height: 15px;
    background: white;
    border-left: 4px solid var(--main-blue-color);
    border-bottom: 4px solid var(--main-blue-color);
    border-bottom-left-radius: 4px;
    border-top-right-radius: 100%;
    transform: rotate(-45deg);
}
.country_span {
    position:absolute;
}

.country_span:before {
    position: relative;
    top: 10px;
    right: 26px;
    display: inline-block;
    content: '';
    width: 15px;
    height: 15px;
    background: white;
    border-left: 4px solid var(--main-blue-color);
    border-bottom: 4px solid var(--main-blue-color);
    border-bottom-left-radius: 4px;
    border-top-right-radius: 100%;
    transform: rotate(-45deg);
}

#enable_change_contact_btn {
    margin: 66.5px 0 0 127px;
    width: 159.2px;
    height: 35px;
    font-size: 16px;
    border-radius: 5px;
    background: var(--main-blue-color);
    color: white;
    border: none;
    letter-spacing: -0.18px;
    text-align: center;
}

#update_contact_btn {
    width: 159.2px;
    height: 35px;
    font-size: 16px;
    border-radius: 5px;
    background: var(--main-blue-color);
    color: white;
    border: none;
    letter-spacing: -0.18px;
    text-align: center;
}

#enable_change_contact_btn:hover, #update_contact_btn:hover {
    background: var(--secondary-black-color);
}

#enable_change_contact_btn:active, #update_contact_btn:active{
    background: var(--secondary-black-color);
}


/*#update_contact_btn {
    float: right;
    width: 200px;
    height: 50px;
    font-size: 20px;
    border-radius: 5px;
    background: gray;
    color: white;
    border: none;
    cursor: pointer;
}*/

/*#enable_change_contact_btn:hover{
    background: #2694e8 !important;
}*/

/*#update_contact_btn:hover {
    background: #6f9700 !important;
}*/


#change_icon {
    padding-right: 5px;
}

#update_icon {
    padding-right: 5px;
}


#Chevron {
    position: relative;
    display: block;
    /*height: 20px;*/ /*height should be double border*/
}

    #Chevron::before,
    #Chevron::after {
        
        position: absolute;
        display: inline;
        top: -100px;
        right: 10px;
        content: "";
        border: 10px solid transparent; /*adjust size*/
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-top-left-radius: 9px;
        border-top-right-radius: 9px;
    }

.select-arrow-active#Chevron:hover::before {
    margin: 0;
    transform: rotate(180deg)
}

.select-arrow-active#Chevron:hover::after {
    margin: 0;
    transform: rotate(180deg);
    top: 4px;
}
    /*Change the four instances of 'top' below to rotate (top/right/bottom/left)*/
#Chevron::before {
    margin: 9px 0 0 0;
    top: 0;
    border-top-color: var(--main-blue-color); /*Chevron Color*/
}

    #Chevron::after {
        margin: 8px 0 0;
        top: -3px; /*adjust thickness*/
        border-top-color: #fff; /*Match background colour*/
    }


@media only screen and (max-width: 400px) {
    #contact_p {
        width: inherit;
        margin: 0 0 57.9px 0;
    }

    #contact_info_read_only_container {
        width: inherit;
        margin: 0;
    }

    #contact_info_read_only_container span{
        width: 250px
    }

    #enable_change_contact_btn {
        margin: 66.5px 0 0 10px;
    }

    #contact_editable_wrapper2 {
        width: 331px;
        margin: 0;
    }

    .label_row_left, .label_row_right {
        width: 320px;
        margin: 0 0 36.8px 0;
    }

    #contact_state_control_select_0 {
        width: 141px;
    }

    #contact_state {
        width: 164px;
    }

    .label_row_right {
        float: none;
    }

    .input_same1 {
        width: 320px;
    }

    #contact_city {
        width: 320px;
        margin: 0;
    }

    .label_row_different {
        float: none;
        width: 331px;
        margin: 0 0 36.8px 0;
    }

    #contact_select_label {
        margin: 7.5px 0 0;
    }

    #contact_country_control_0 {
        width: 318px;
    }
    #contact_country_label {
        margin: 7.5px 0 0;
    }
}
