@font-face {
    font-family: src="C:/Users/Mohammad/fonts/oxygen/Oxygen.otf"';
    src: url(../fonts/oxygen/Oxygen.otf) format('opentype');
}

@font-face {
    font-family: 'Oxygen Light';
    src: url(../fonts/oxygen/Oxygen-Light.otf) format('opentype');
}

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/roboto/Roboto-Black.ttf) format('truetype');
}

@font-face {
    font-family: 'Roboto Italic';
    src: url(../fonts/roboto/Roboto-BlackItalic.ttf) format('truetype');
}


@font-face {
    font-family: 'Roboto Medium Italic';
    src: url(../fonts/roboto/Roboto-MediumItalic.ttf) format('truetype');
}

@font-face {
    font-family: 'Roboto Light';
    src: url(../fonts/roboto/Roboto-Light.ttf) format('truetype');
}

@font-face {
    font-family: 'Roboto Thin';
    src: url(../fonts/roboto/Roboto-Thin.ttf) format('truetype');
}

@font-face {
    font-family: 'Roboto Medium';
    src: url(../fonts/roboto/Roboto-Medium.ttf) format('truetype');
}

@font-face {
    font-family: 'Roboto Bold Italic';
    src: url(../fonts/roboto/Roboto-MediumItalic.ttf) format('truetype');
}



html ,html body{
    font-family: Oxygen, sans-serif;
    margin:0;
    padding:0;
}

body{
    background: #f1f3f6;
    height:100vh;
    width: 100vw;
    min-height:440px;
    overflow-y: auto;
    overflow-x: hidden;
}

.main-container{
    display: block;
    margin: 0 auto;
    width: 75%;
    max-width: 900px;
    text-align: center;
}

.title-container{
    margin: 4% auto 0;
    /* margin-left: 2%; */
    width: 70%;
    text-align: center;
    white-space: nowrap;
}

.title-container img{
    display: inline-block;
    width: 70px;
        vertical-align: top;
}

.title-container span{
    font-family: 'Roboto Light', sans-serif;
    font-size: 42px;
    color: #515969 vertical-align: middle;
    margin-left: 20px;
    letter-spacing: 1px;
    display: inline-block;
    width: 85%;
    margin-top: 0;
    white-space: normal;
    margin-bottom: 20px;

}

.uninstall-text{
    font-family: 'Roboto Medium', sans-serif;
    color:#8B93A1;
    font-size: 18px;
    text-align: left;
    margin: 1% 0 20px 0;

}

.uninstall-form{
    width: 100%;
    text-align: center;

}


.left-form, .right-form{
    width:49.7%;
    margin:0 auto;
    display: inline-block;
    vertical-align: top;

}

.left-form{
   text-align: left;
}

.right-form{
   text-align: right;
}


.form-input-wrapper{
    width: 85%;
    display: inline-block;
    height: 70px;
    font-family: 'Roboto Medium', sans-serif;
    color:#8B93A1;
    background: url(uninstall/option-box.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0, 0;
    font-size: 22px;
    line-height: 68px;
    text-align: left;
    padding:0 20px;
    margin:5px 0;
    cursor:pointer;
    white-space: nowrap;
}

.form-input-wrapper span{
    display: inline-block;
    vertical-align: middle;
}

.form-input-wrapper-selected{
    background-image: url(uninstall/selected.png);
    color:#54A2FE;
    /*height: 100px;
    width: 88%;
    margin-left: -3%;
    line-height: 89px;
    padding-left: 35px;
    margin-bottom: -1%;
    margin-top: -1%;
    color: white;*/
}

.right-form .form-input-wrapper-selected{
  margin-left: 3%;

}

.circle{
    display: inline-block;
    height: 18px;
    vertical-align: middle;
    margin-right: 10px;

}

.bottom-wrap{
    width: 100%;
    margin-top:10px;
}

.bottom-left-wrap{
    float:left;
}

.bottom-right-wrap{
    float: right;
    display: inline-block;
    vertical-align: top;
}
.add-name-wrapper{
    display: inline-block;
}
.add-name-wrapper p{
    text-shadow: none;
    font-family: 'Roboto Medium', sans-serif;
    font-size: 18px;
    color: #8B93A1;
    text-align: left;
}

.name-input-wrapper{
    width: 400px;
    display: block;
    background: url(uninstall/option-box.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0, 0;
    height: 53px;
}

.optional-text{
    display: inline-block;
    clear:left;
    vertical-align: bottom;
    margin-bottom: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #8B93A1;
    margin-left: 10px;
    text-shadow: none;

}

.submit-button{
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
    width: 132px;
    height: 60px;
    line-height: 60px;
    margin-top: 58px;
    font-size: 20px;
    color: #FFFFFF;
    background: url(uninstall/submit-button-active.png) no-repeat;
    background-size: 100% 100%;
    outline: none;
    background-position: 0, 0;
    border: none;
    cursor: pointer;
}

.disabled{
    background-image: url(uninstall/submit-button.png);
    color: #FFFFFF;
    margin-top: 52px;
}

.specify-container{
    text-align: left;
    color: white;
    font-size: 16px;
    height: 53px;
    line-height: 53px;
    padding-left: 20px;
    margin-left: 3%;
    margin-top:0;
    margin-bottom:5px;
}

.left-container .specify-container{
   margin-left: 0;
}

.specify-container span{

}

.specify-input-wrapper{
    width: 70%;
    display: inline-block;
    vertical-align: middle;
    background: url(uninstall/text-field.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0, 0;
    height: 53px;
    float: right;
}

.app-not-working{
    width: 55%;
}

.error-text-field-wrapper{
    width: 92%;
    display: inline-block;
    vertical-align: middle;
    background: url(uninstall/text-field.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0, 0;
    height: 100px;
    float: right;
    margin-top: 5px;
    margin-bottom: 5px;
}

.error-text-field-wrapper textarea{
    font-family: 'Oxygen Light';
    resize: none;
    width: 97%;
    background: transparent;
    border: none;
    height: 90px;
    padding: 5px;
    overflow-y: auto;
    font-size: 16px;
    color: white;
    outline: none;
}

.specify-input-wrapper input{
    background: transparent;
    width: 95%;
    margin-left: 1%;
    height: 60%;
    display: block;
    border: none;
    margin-top: 10px;
    outline: none;
    font-size: 17px;
    color: white;
}

.name-input-wrapper input{
    background: transparent;
    width: 90%;
    padding-top: 10px;
    margin: 0px auto;
    height: 60%;
    display: block;
    border: none;
    outline: none;
    font-size: 17px;
}

.reason-textarea{
    width: 85%;
    resize: none;
    border: 1px solid #54A2FE;
    float: right;
    margin-top: -6px;
    height: 70px;
    padding: 19px;
    font-size: 16px;
}

.invalid-email{
    border:1px solid red;
}
::-webkit-input-placeholder {
   color: #B3BAC5;
    font-family: 'Roboto Light', sans-serif;
}

:-moz-placeholder { /* Firefox 18- */
   color: #B3BAC5;
    font-family: 'Roboto Light', sans-serif;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #B3BAC5;
    font-family: 'Roboto Light', sans-serif;
}

:-ms-input-placeholder {
   color: #B3BAC5;
    font-family: 'Roboto Light', sans-serif;
}

.right-form .form-input-wrapper-selected {
 /*   margin-left: 5%;*/
}

@media screen and (max-width:2000px){

    .main-container {
        display: block;
        margin: 0 auto;
        width: 75%;
        max-width: 800px;
        text-align: center;
    }

    .title-container {
        margin: 4% auto 0;
        width: 70%;
        text-align: center;
        white-space: nowrap;
    }

    .title-container span {
        font-family: 'Roboto Light', sans-serif;
        font-size: 34px;
        color: #515969 vertical-align: middle;
        margin-left: 20px;
        letter-spacing: 1px;
        display: inline-block;
        width: 85%;
        margin-top: 0;
        white-space: normal;
        margin-bottom: 10px;
    }

    .title-container img {
        display: inline-block;
        width: 50px;
        vertical-align: top;
    }

    .uninstall-text {
        font-family: 'Roboto Medium', sans-serif;
        color: #8B93A1;
        font-size: 16px;
        text-align: left;
        margin: 1% 0 10px 0;
    }

    .form-input-wrapper {
        width: 85%;
        display: inline-block;
        height: 60px;
        font-family: 'Roboto Medium', sans-serif;
        color: #8B93A1;
        font-size: 16px;
        line-height: 60px;
        text-align: left;
        padding: 0 20px;
        margin: 5px 0;
        cursor: pointer;
        white-space: nowrap;
    }

    .circle {
        display: inline-block;
        height: 16px;
        vertical-align: middle;
        margin-right: 10px;
    }

    .reason-textarea {
        width: 85%;
        resize: none;
        border: 1px solid #54A2FE;
        float: right;
        margin-top: -6px;
        height: 47px;
        padding: 10px 19px;
    }


}


@media screen and (max-width:1050px){

    .main-container {
        display: block;
        margin: 0 auto;
        width: 75%;
        max-width: 700px;
        text-align: center;
    }

    .title-container {
        margin: 4% auto 0;
        width: 90%;
        text-align: center;
        white-space: nowrap;
    }

    .title-container span {
        font-size:30px;
    }

    .title-container img {
        display: inline-block;
        width: 50px;
        vertical-align: top;
    }

    .uninstall-text {
        font-size: 14px;
    }

    .form-input-wrapper {
        width: 85%;
        display: inline-block;
        height: 50px;
        font-family: 'Roboto Medium', sans-serif;
        color: #8B93A1;
        font-size: 14px;
        line-height: 50px;
        text-align: left;
        padding: 0 20px;
        margin: 5px 0;
        cursor: pointer;
        white-space: nowrap;
    }

    .circle {
        display: inline-block;
        height: 14px;
        vertical-align: middle;
        margin-right: 5px;
    }

    .reason-textarea {
        width: 85%;
        resize: none;
        border: 1px solid #54A2FE;
        float: right;
        margin-top: -6px;
        height: 47px;
        padding: 10px 19px;
    }

    .name-input-wrapper {
        height: 45px;
    }

    .name-input-wrapper input {
        background: transparent;
        width: 90%;
        padding-top: 10px;
        margin: 0px auto;
        height: 52%;
        display: block;
        border: none;
        outline: none;
        font-size: 15px;
    }

    .disabled {
        margin-top: 45px;
    }

    .submit-button{
        margin-top: 47px;
    }
}

@media screen and (max-width: 860px){

    .main-container{
        width: 90%;
    }

    .title-container{

            width: 100%;

    }

    .title-container img {
        display: block;
        margin: 20px auto;
    }

    .title-container span{
        font-size: 18px;
        display: block;
        margin: 0 auto 10px auto;
        width: 100%;
    }

    .left-form, .right-form{
        float: none;
        width: 100%;
        display: block;
        text-align: left;
    }

    .right-form .form-input-wrapper-selected {
        margin-left:0;
    }

    .reason-textarea{
        margin-left: 0;
        float: none;
        font-size: 14px;
    }

    .bottom-wrap {
        width: 100%;
        margin-top: 10px;
    }

    .bottom-left-wrap{
        width: 100%;
        float: none;
    }

    .add-name-wrapper {
        display: block;
        width: 100%;
    }

    .name-input-wrapper {
        height: 45px;
            width: 92%;
    }

    .bottom-right-wrap {
    float: none;
    display: block;
    margin-left: calc(85% - 132px);
    }

    .submit-button {
        margin-top: 20px;
        margin-bottom: 40px;
    }

    .add-name-wrapper p{
        font-size:14px;
    }
}