@font-face {
    font-family: 'robotolight';
    src        : url('../fonts/roboto.thin.ttf') format('truetype');
    font-weight: normal;
    font-style : normal;
}

@font-face {
    font-family: 'robotoregular';
    src        : url('../fonts/roboto.regular.ttf') format('truetype');
    font-weight: normal;
    font-style : normal;
}

/*
@font-face {
    font-family : 'robotothin';
    src : url('../fonts/roboto-thin-webfont.eot');
    src : url('../fonts/roboto-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-thin-webfont.woff2') format('woff2'),
         url('../fonts/roboto-thin-webfont.woff') format('woff'),
         url('../fonts/roboto-thin-webfont.ttf') format('truetype');
    font-weight : normal;
    font-style : normal;
} */

.invalid-feedback {
    color      : red;
    padding-top: 4px;
    font-weight: 500;
}

.form-row {
    margin-bottom: 30px;

}

.menu-header {
    height             : 35%;
    background         : url("../images/pozadie.jpg");
    background-size    : cover;
    /* <------ */
    background-repeat  : no-repeat;
    background-position: center center;
}

.avatar {
    margin    : auto;
    margin-top: 30px;
    width     : 110% !important;
    height    : 110% !important;
    max-width : 110px !important;
    max-height: 110px !important;
}

.avatar-h4 {
    color     : aliceblue;
    text-align: center;
}

.menu-content {
    background: none !important;
}

.menu-content .list {
    padding: 0px !important;
}

.menu-content .menu-list div {
    min-height     : 15%;
    font-size      : 22px;
    padding        : 20px 50px 10px 20px;
    font-size      : 22px;
    display        : flex;
    justify-content: left;
    align-items    : flex-end;
}

.logout {
    margin        : 10px 20px 10px 20px;
    font-size     : 22px;
    text-transform: capitalize;
}

.expiry-div {
    color     : #3880ff;
    min-height: 10% !important;
}

.menu-footer {
    margin-left: 21px;
}


ion-item {
    /* background: #262933 !important; */
    color: #D0D2D4;
}

.back-dark {
    background: #1B2025 !important;
}


.avatar-background {
    background: white;
}

.addprofilepage .modal-wrapper {
    background: rgba(48, 55, 64, 0.6);
    padding   : 7px;
    height    : 320px;
}

.addprofilepage .alert-wrapper {
    background: #283845;
    color     : #D0D2D4;
}

.addprofilenamepage .modal-wrapper {
    background: rgba(48, 55, 64, 0.6);
    padding   : 7px;
    height    : 200px;
}

.addprofilenamepage .alert-wrapper {
    background: #283845;
    color     : #D0D2D4;
}

ion-action-sheet {
    --background: #283845 !important;
    --color     : #D0D2D4 !important;
}

ion-action-sheet .action-sheet-button {
    color: #d8d8d8 !important;
}

.device_offline_screen {
    width         : 100%;
    height        : 100%;
    position      : absolute;
    background    : rgba(0, 0, 0, 0.7);
    z-index       : 3;
    font-size     : 30px;
    text-align    : center;
    display       : inline-block;
    vertical-align: middle;
    color         : #d8d8d8;
}

.device_offline_screen:before {
    content       : '';
    display       : inline-block;
    height        : 100%;
    vertical-align: middle;
}

ion-split-pane {
    --border: 1px #000000 !important;
}

.internet-overlay {

    position      : fixed;
    background    : rgba(0, 0, 0, 0.7);
    z-index       : 20;
    font-size     : 30px;
    text-align    : center;
    display       : inline-block;
    vertical-align: middle;
    font-family   : "robotoregular";
    color         : #d8d8d8;
    width         : 100%;
    height        : 100%;

}

.internet-overlay:before {

    content       : '';
    display       : inline-block;
    height        : 100%;
    vertical-align: middle;
    margin-right  : -0.25em;

}