#confirm_pass, #new_pass, #old_pass {
    width: 75%;
    border-radius: 5px;
    border: 1px solid #0258a8;
    padding-right: 33px!important
}

#new_pass, #old_pass {
    display: block!important;
    margin-bottom: 2%
}

.button-style:hover {
    font-weight: 600
}

h3, label {
    font-family: poppins!important
}

html {
    font-family: poppins!important
}

p {
    font-family: poppins!important
}

.md-content h3 {
    font-family: poppins!important
}

.input-bg {
    border: none!important;
    background: #f5f5f5!important;
    width: 95%!important;
    max-width: 95%!important
}

.show {
    display: block
}

.height-35 {
    height: 45px
}

#addAppButton {
    background: #0000cd;
    color: #fff
}

#qa1::placeholder {
    color: gray!important;
    font-family: poppins!important
}

#pwph::placeholder {
    font-family: poppins
}

#loginid::placeholder {
    font-family: poppins
}

#pass::placeholder {
    color: gray!important
}

#qa2::placeholder {
    color: gray!important;
    font-family: poppins!important
}

#qa3::placeholder {
    color: gray!important;
    font-family: poppins!important
}

#qa4::placeholder {
    color: gray!important;
    font-family: poppins!important
}

#qa5::placeholder {
    color: gray!important;
    font-family: poppins!important
}

#qa6::placeholder {
    color: gray!important;
    font-family: poppins!important
}

.app-username {
    margin-left: 10px;
    width: 200px;
    text-align: left
}

@supports (-ms-ime-align:auto) {
    .app-username {
        margin-left: 10px
    }
}

.teleworkr-utility-logo {
    color: #0258a8;
    font-weight: bolder;
    font-size: 28px;
    font-style: italic
}

.teleworkr-logo {
    font-size: 44px;
    color: #0258a8;
    font-style: italic;
    font-weight: 900
}

.logo-container {
    background-color: #fff;
    border-radius: 7px;
    width: 210px;
    position: relative;
    top: -190px
}

.login-container {
    height: 300px;
    width: 320px;
    background-color: #0077B6;
    border-radius: 7px;
    position: absolute
}

#pass-status {
    cursor: pointer
}

.login-grid-container {
    display: inline-grid;
    grid-gap: 15px;
    position: relative;
    padding: 20px
}

.main-login-container {
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
    width: 97%;
    float: right;
    height: 100%;
    background-color: #fff;
    padding: 20px;
    position: absolute
}

.main-container {
    min-width: 420px;
}

.img-logo-height {
    height: unset;
    width: 155px;
    margin-top: 9px
}

.langsel {
    font-size: 13px!important
}

@media screen and (min-width:540px) {
    .img-logo-height {
        width: 200px;
        margin-top: 6px
    }
}

@media screen and (min-width:768px) {
    .login-container {
        height: 298px;
        width: 400px
    }
    .logo-container {
        background-color: #fff;
        border-radius: 7px;
        height: 270px;
        width: 210px;
        box-shadow: 10px 10px 10px rgba(33, 33, 33, .2);
        left: 218px;
        top: 0;
        position: relative
    }
    @-moz-document url-prefix() {
        .logo-container {
            left: 0!important;
            margin: 0 0 0 450px
        }
    }
    @supports (-ms-ime-align:auto) {
        .logo-container {
            margin: 0 0 0 450px
        }
    }
    .fixed-input-width {
        width: 275px;
        padding-right: 52px
    }
    .login-grid-container {
        display: inline-grid;
        grid-gap: 15px;
        position: relative;
        margin: 24px 0 0 18px;
        padding: 2px
    }
    .body-color-and-margin-login {
        background-color:#0077B6;
        overflow: hidden;
        margin: 0
    }
    .main-login-container {
        width: 92%;
        margin-left: 8%
    }
}

.input-width-260 {
    width: 23vw
}

.float-right {
    float: right
}

.button-style {
    border-radius: 5px;
    background-color: #fff;
    border: none;
    outline: 0;
    padding: 8px!important;
    color: #0258a8;
    font-family: poppins;
    position: relative;
    text-align: center;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer
}

.button-style:after {
    content: "";
    background: #fff;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all .8s
}

.button-style:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

.font-poppins {
    font-family: poppins;
    color: #fff
}

.input-border-radius {
    border-radius: 7px;
    padding: 8px
}

.search-bar {
    border-radius: 40px;
    box-shadow: 0 0 10px rgba(33, 33, 33, .2);
    height: 10px;
    width: 350px;
    margin-left: 50px;
    display: flex;
    padding: 10px;
    align-items: center
}

.border-none {
    border: 0;
    outline: 0
}

.margin-left-10px {
    margin-left: 10px
}

.align-center {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center
}

.grid-item {
    height: 200px;
    width: 300px;
    box-shadow: 1px 1px 5px #d3d3d3;
    border-radius: 5px;
    border-left: 3px solid gray
}

.grid-item:hover {
    border-left: 3px solid #19b592;
    box-shadow: 5px 5px 20px rgba(33, 33, 33, .2);
    cursor: pointer
}

.change-profile-pic {
    cursor: pointer
}

.margin-auto {
    margin: auto
}

.color-gray {
    color: #393839
}

.circle {
    border-radius: 50%;
    height: 30;
    width: 30;
    box-shadow: 0 0 10px rgba(33, 33, 33, .2)
}

.margin-app-name {
    margin-left: 10px
}

.width-fit-content {
    width: fit-content
}

.grid-container {
    margin: 100px 0 0 50px;
    display: grid;
    grid-template-columns: auto auto auto
}

.grid-file {
    padding: 20px;
    font-size: 30px;
    text-align: center
}

.utility-toolbar {
    display: inline;
    align-items: center
}

#userApps {
    padding: 100px 0
}

@media screen and (min-width:768px) {
    #userApps {
        padding: 60px
    }
}

@media screen and (min-width:1440px) {
    .img-logo-height {
        height: unset;
        width: 220px
    }
}

.img-search-height {
    height: 20
}

.vl {
    height: 25px;
    width: 0
}

.font-poppins {
    font-family: Poppins
}

.color-green {
    color: #0077B6
}

.signinerror {
    margin-top: 14px;
    margin-left: 70px;
    position: absolute;
    display: none;
    color: #95faff!important
}

@media screen and (min-width:768px) {
    .signinerror {
        margin-top: -10px;
        margin-left: 110px;
        width: 100%;
        text-align: center;
        margin: auto
    }
}

.err-notif {
    position: absolute;
    color: #95faff!important;
    font-family: poppins
}

.twofa-option {
    visibility: hidden;
    margin-top: -10%
}

.green-icon {
    color: #0258a8;
    font-size: larger!important
}

.marg-top {
    margin-top: -7%
}

.back_btn {
    color: #fff
}

.otpAuth {
    color: #fff
}

.qr-code {
    margin-top: -8%
}

@media screen and (max-width:706px) {
    .height-35 {
        height: 25px
    }
}

@media screen and (max-width:672px) {
    .height-35 {
        height: 20px!important
    }
}

@media screen and (max-width:922px) and (min-width:673px) {
    .input-width-260 {
        width: 30vw
    }
    .height-35 {
        height: 30px
    }
}

.w3-animate-zoom {
    max-width: 700px;
    border-radius: 40px
}

#qrcode {
    width: 200px;
    height: 200px;
    margin: auto
}

.logout:hover {
    cursor: pointer
}

.md-content {
    background: #00508b!important;
    color: #fff!important;
    border-radius: 5px
}

.md-content h3 {
    background: #fff none repeat scroll 0 0!important;
    color: #0258a8
}

#qaHead {
    background: 0 0!important
}

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80%!important
}

.md-content {
    background: #fff!important;
    color: #0258a8!important;
    border-radius: 5px
}

.md-overlay {
    background: rgba(49, 47, 47, .8)!important
}

.iconholder {
    max-height: 300px!important;
    width: 97.5%!important
}

#username {
    font-weight: 700;
    color: #888
}

.user-options {
    height: 80px;
    width: 130;
    margin-right: 25px;
    box-shadow: 0 0 10px rgba(33, 33, 33, .2);
    position: absolute;
    margin-left: 1138px;
    margin-top: 15px
}

.circle:hover {
    cursor: pointer
}

.appBoxDiv {
    box-sizing: border-box;
    width: 550px!important;
    position: relative;
    padding: 15px;
    height: 95px!important;
    float: left;
    margin-top: 20px!important;
    margin-bottom: 2%;
    margin-left: 2px;
    margin-right: 2px;
    border-radius: 6px
}

.appimg {
    text-align: center!important;
    justify-content: center!important;
    align-items: center!important;
    height: unset!important
}

@media screen and (max-width:800px) {
    .topnav .search-container {
        float: none!important
    }
    .topnav .search-container button, .topnav a, .topnav input[type=text] {
        float: none!important;
        display: block!important;
        text-align: left!important;
        width: 80%!important;
        margin: 0!important;
        padding: 14px!important
    }
    .topnav input[type=text] {
        border: 1px solid #00508b!important
    }
}

.topnav {
    font-family: unset!important
}

.topnav {
    overflow: hidden!important
}

.topnav a {
    float: left!important;
    display: block!important;
    color: #000!important;
    text-align: center!important;
    padding: 14px 16px!important;
    text-decoration: none!important;
    font-size: 17px!important
}

.leftDiv>#change_phrase_inputDiv>#CurrentPhrase {
    margin-top: 10%!important
}

.topnav .search-container {
    float: right!important
}

.search-container {
    max-width: 80%!important
}

.topnav input[type=text] {
    padding: 4px!important;
    margin-top: 6px!important;
    font-size: 17px!important;
    border: solid 1px #006400;
    border-radius: 5px 5px 5px 5px;
    border-bottom-width: thin
}

.topnav::placeholder {
    color: grey!important;
    opacity: 1
}

.topnav .search-container button {
    float: right!important;
    padding: 11px 10px!important;
    margin-top: 8px!important;
    margin-right: 25px!important;
    font-size: 17px!important;
    border: none!important;
    cursor: pointer!important
}

.pad-10 {
    padding: 10px
}

#modalAppBar::-webkit-scrollbar-track {
    display: none;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    border-radius: 10px;
    background-color: #f5f5f5
}

#modalAppBar::-webkit-scrollbar {
    width: 5px
}

#modalAppBar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #e9e9e9
}

.addappicon {
    -webkit-transform: translate3d(0, 0, 0)!important;
    padding-left: 5px!important;
    padding-right: 5px!important;
    word-break: break-word;
    width: 16.5%!important;
    font-size: 14px!important;
    color: #fff;
    height: 64px;
    margin-left: 6.8%;
    border-radius: 5px!important;
    border: 1px solid #fff;
    text-align: center!important;
    display: flex!important;
    justify-content: center!important;
    align-items: center!important
}

.fake-input {
    max-width: 97%!important
}

.fake-input {
    position: relative;
    width: 304px
}

.fake-input input {
    border: none;
    background: #fff;
    display: block;
    width: 100%;
    box-sizing: border-box
}

.fake-input img {
    position: absolute;
    top: 2px;
    right: 5px;
    width: 27px!important
}

.add-text {
    font-size: 34px;
    margin-left: 30%
}

.border-color {
    border: 1px solid #0000cd
}

#user {
    background: #f5f5f5!important;
    font-size: 17px;
    font-family: poppins!important
}

#pass::placeholder {
    font-family: poppins!important
}

#pass {
    font-family: poppins!important;
    font-size: 17px
}

.apppContainer .inputbox {
    margin-top: 1%;
    max-width: 90%!important;
    width: 90%!important;
    margin-left: 0;
    background: 0 0;
    border-radius: 5px;
    color: #000!important;
    background-color: #fff
}

.settingsPageDiv {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    width: 90%;
    height: 415px;
    font-family: RobotoLight
}

.userPic {
    padding-top: 64px;
    color: #fff
}

.userPic input[type=file] {
    direction: rtl
}

#change_phrase_inputDiv {
    color: #fff!important
}

.leftDiv>#change_phrase_inputDiv>#CurrentPhrase {
    margin-top: 10%!important
}

#CurrentPhrase, #Expression, #uniqueWord {
    padding-right: 22px!important
}

@media screen and (max-width:1058px) {
    .user-options {
        margin-left: 845px
    }
    #lock {
        margin-top: 165px
    }
    #username {
        margin-left: 15px
    }
    .search-bar {
        margin-left: 40px
    }
}

@media screen and (max-width:890px) {
    .app-name {
        font-size: 16px
    }
    .search-bar {
        margin-left: 30px
    }
    #username {
        margin-left: 10px
    }
}

@media screen and (max-width:1024px) and (max-height:1366px) {
    .height-35 {
        height: 30px
    }
}

.brand-logo-img {
    width: 200px;
    position: absolute;
}

.field-icon {
    float: right;
    margin-left: 250px;
    margin-top: -56.5px;
    position: relative;
    z-index: 2;
    padding: 2px
}

@media screen and (width:768px) and (height:1024px) {
    .height-35 {
        height: 22px
    }
    .field-icon {
        margin-top: -20%;
        margin-left: 161px
    }
}

@media screen and (max-width:414px) and (max-height:823px) {
    .button-style {
        width: 80%
    }
    .height-35 {
        height: 15px
    }
}

@media screen and (width:1920px) and (height:1080px) {
    .copyButton {
        height: 55px;
        font-size: 20px
    }
    .namePassDiv, .passPassDiv {
        font-size: 115%
    }
    #pass, #user {
        font-size: 24px
    }
    #qa3, #qa5 {
        margin-top: 3%;
        font-size: 20px
    }
    .height-35 {
        height: 55px
    }
    .user-options {
        margin-left: 1635px;
        margin-top: 25px
    }
    .logout {
        width: fit-content;
        font-size: 20px!important
    }
    .delete-app, .edit-app {
        margin-top: 35px!important
    }
    .app-name {
        font-size: 30px
    }
    #backbtn {
        font-size: 24px
    }
    #qa1, #qa2, #qa4, #qa6 {
        font-size: 20px
    }
    .teleworkr-utility-logo {
        font-size: 38px
    }
    .initial {
        font-size: 20px
    }
    .circle {
        height: 40px;
        width: 40px;
        margin-left: 30px
    }
    .teleworkr-logo {
        font-size: 70px
    }
}

@media screen and (max-width:1024px) and (max-height:1366px) {
    .user-options {
        margin-left: 815px
    }
}

.modal-radius {
    border-radius: 32px
}

.panel-head {
    background: #f5f5f5!important
}

.panel {
    border: 2px solid #f1eded;
    border-radius: 10px;
    margin-bottom: 17px
}

.md-border {
    border-radius: 30px!important
}

.btn-blue {
    color: #fff!important;
    background: #0258a8!important
}

.qa-btn {
    width: 37%!important
}

.round-corner-button {
    border-radius: 24px
}

.small-btn {
    width: 32%!important
}

.input-box-gray {
    border-color: #f1eded!important;
    border-width: 2px!important;
    padding: 7px!important;
    border-style: solid
}

.OkCloseButtons button:disabled {
    background: #ddd;
    color: #fff;
    border: none
}

.OkCloseButtons button:disabled:hover {
    background: #ddd
}

.app-icon {
    background: #0258a8;
    border-radius: 54%
}

.img-width {
    width: 68%
}

.keyboard-style {
    margin-top: -40px;
    width: 18px;
    height: 18px;
    margin-left: 228px;
    position: relative;
    padding: 1px;
    cursor: pointer
}

.fixed-input-width {
    width: 275px;
    padding-right: 52px
}

.passchange_locks {
    display: block!important;
    margin-right: 14%!important;
    position: relative!important
}

.input-and-lock {
    display: block;
    width: 100%
}

#lock_op {
    top: -18px!important;
    padding: 2px;
    width: 20px;
    cursor: pointer
}

#lock_np {
    top: -18px!important;
    padding: 2px;
    width: 20px;
    cursor: pointer
}

#lock_cnp {
    top: 35px!important;
    padding: 2px;
    width: 20px;
    cursor: pointer
}

@media screen and (max-width:1024px) {
    #lock_op {
        width: 18px;
        top: -13px!important
    }
    #lock_np {
        width: 18px;
        top: -14px!important
    }
    #lock_cnp {
        width: 18px;
        top: 32.5px!important
    }
}

@media screen and (max-width:768px) {
    #lock_op {
        top: -11px!important
    }
    #lock_np {
        top: -10px!important
    }
    #lock_cnp {
        top: 33px!important
    }
}

.utility-toolbar-icons {
    padding: 0 4px!important;
    margin-left: 10px!important;
    width: unset!important;
    height: 20px!important;
    cursor: pointer!important
}

#tzApps {
    display: flex;
    flex-flow: column wrap;
    height: 85vh
}

#file-transfer-browser-title {
    border-radius: inherit
}

.file-transer-sel {
    font-size: inherit;
    padding: 10px
}

#file-transer-sel-msg {
    font-weight: 700;
    font-size: 20px
}

#file-transer-sel-btn {
    font-family: RobotoLight;
    margin-left: 12%
}

::-webkit-scrollbar {
    height: 5px;
    width: 5px
}

::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 10px
}

::-webkit-scrollbar-thumb {
    background: #d3d3d3;
    border-radius: 10px
}

.app-font {
    white-space: nowrap;
    font-size: 18px
}

.font-12 {
    font-size: 12px
}

.nowrap {
    white-space: nowrap
}

.files-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px
}

.dropdown {
    position: relative;
    display: inline-block
}

.status-dropdown {
    position: relative;
    display: inline-block
}

.status-options {
    display: none;
    position: absolute;
    background-color: #fff;
    border-radius: 10px;
    min-width: 174px;
    overflow: auto;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
    z-index: 1;
    cursor: hand;
    margin-left: -30px;
    margin-top: 8px;
    text-align: left;
    padding: 2px 8px;
    box-sizing: border-box
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    border-radius: 10px;
    min-width: 174px;
    overflow: auto;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
    z-index: 1;
    cursor: hand;
    margin-left: -30px;
    margin-top: 14px;
    text-align: left;
    padding: 2px 8px;
    box-sizing: border-box
}

.dropdown-content>p:hover {
    color: #0258a8
}

.status-options>p:hover {
    color: #0258a8
}

.dropdown-content a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block
}

.dropdown a:hover {
    background-color: #ddd
}

@media screen and (max-height:498px) and (max-width:768px) {
    .login-container,
    .logo-container
    {
        margin-top: 150px;
    }
}