@font-face {
    font-family: firstFont;
    font-weight: 300;
    src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'),
    url('/admin/public/assets/font/RobotoCondensed-Light.woff2') format('woff2'),
    url('/admin/public/assets/font/RobotoCondensed-Light.woff') format('woff'),
    url('/admin/public/assets/font/RobotoCondensed-Light.ttf') format('truetype');
}

@font-face {
    font-family: firstFont;
    font-weight: 400;
    src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
    url('/admin/public/assets/font/RobotoCondensed-Regular.woff2') format('woff2'),
    url('/admin/public/assets/font/RobotoCondensed-Regular.woff') format('woff'),
    url('/admin/public/assets/font/RobotoCondensed-Regular.eot') format('embedded-opentype'),
    url('/admin/public/assets/font/RobotoCondensed-Regular.ttf') format('truetype');
}

@font-face {
    font-family: firstFont;
    font-weight: 700;
    src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'),
    url('/admin/public/assets/font/RobotoCondensed-Bold.woff2') format('woff2'),
    url('/admin/public/assets/font/RobotoCondensed-Bold.woff') format('woff'),
    url('/admin/public/assets/font/RobotoCondensed-Bold.ttf') format('truetype');
}

html {
    min-width: 1360px;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: firstFont, sans-serif;
    font-size: 14px;
}

img {
    max-width: 100%;
    max-height: 100%;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar:horizontal {
    height: 7px;
}

::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
    background-color: rgba(200, 200, 200, 0.3);
}

::-webkit-scrollbar-thumb {
    background-color: rgba(200, 200, 200, 0.4);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(200, 200, 200, 0.6);
}

h1 {
    font-size: 22px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 16px;
}

h5 {
    font-size: 14px;
}

fieldset {
    margin: 20px;
    border-radius: 3px;
    padding: 5px 0 0 5px;
}

legend {
    margin: 0 10px;
    padding: 0 5px;
}

.small-form {
    margin: auto;
    display: inline-block;
    text-align: left;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}

.medium-form {
    margin: auto;
    display: inline-block;
    text-align: left;
    margin-top: 20px;
}

.large-form {
    text-align: left;
    margin: 20px 20px 0 20px;
}

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

.form-container {
    padding: 20px;
}

.form-title {
    text-align: center;
    padding: 5px;
    font-weight: 700;
    opacity: 0.8;
}

.form-sub-title {
    padding: 5px 0 5px 40px;
}

.x-small-font {
    font-size: 10px;
}

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

.medium-font {
    font-size: 14px;
}

.large-font {
    font-size: 18px;
}

.x-large-font {
    font-size: 22px;
}

.text-center {
    text-align: center;
}

.operation-area {
    margin-top: 15px;
}

input.required, textarea.required, .multi-select .required .k-multiselect-wrap,
.k-numerictextbox.required .k-input {
    background-image: url('../img/required.png');
    background-repeat: no-repeat;
    background-position: 98% center;
    background-size: 10px 10px;
    padding-right: 15px;
}

input[type='text'].ng-valid.ng-not-empty, input[type='password'].ng-valid.ng-not-empty,
input[type='email'].ng-valid.ng-not-empty, input[type='date'].ng-valid.ng-not-empty,
textarea.ng-valid.ng-not-empty, .multi-select.ng-valid.ng-not-empty .k-multiselect-wrap,
.auto-complete.ng-valid.ng-not-empty .k-input, .k-numerictextbox.ng-valid.ng-not-empty .k-input {
    background-image: url('../img/valid.png');
    background-repeat: no-repeat;
    background-position: 98% center;
    background-size: 16px 16px;
    box-shadow: 0 0 5px 0 green;
    border-color: #00ab00;
    padding-right: 20px;
}

input[type='text'].ng-invalid.ng-not-empty, input[type='password'].ng-invalid.ng-not-empty,
input[type='email'].ng-invalid.ng-not-empty, input[type='date'].ng-invalid.ng-not-empty,
textarea.ng-invalid.ng-not-empty, .multi-select.ng-invalid.ng-not-empty .k-multiselect-wrap,
.auto-complete.ng-invalid.ng-not-empty .k-input, .k-numerictextbox.ng-invalid.ng-not-empty .k-input {
    background-image: url('../img/invalid.png');
    background-repeat: no-repeat;
    background-position: 98% center;
    background-size: 16px 16px;
    box-shadow: 0 0 5px 0 red;
    border-color: red;
    padding-right: 20px;
}

.date-picker .k-input, .number-box .k-input, .auto-complete .k-input {
    padding-right: 0 !important;
}

.field-error-hint {
    background: red;
    border-radius: 3px;
    color: white;
    margin: 3px 0 0 8px;
    padding: 3px 5px 3px 5px;
    z-index: 10;
    position: absolute;
    display: inline;
    white-space: nowrap;
}

.field-error-hint::before {
    content: "\25C4";
    color: red;
    position: absolute;
    left: -10px;
}

.field-container {
    display: inline-block;
    padding: 10px 0 10px 0;
}

.field-container.short {
    min-height: 20px;
}

.field-container.medium {
    min-height: 40px;
}

.field-container.large {
    min-height: 115px;
}

.field-label {
    display: inline-block;
    width: 160px;
    text-align: right;
    padding-right: 10px;
    vertical-align: middle;
    font-weight: bold;
    opacity: 0.8;
}

.medium input, .medium .k-multiselect {
    width: 200px;
    transition: width .25s;
}

.medium input:focus {
    width: 210px;
}

.number-box input:focus {
    width: 100%;
}

.field-input {
    display: inline-block;
}

.field-input.medium {
    width: 215px;
    vertical-align: middle;
}

.large input, .large textarea {
    width: 350px;
    transition: width .25s;
}

.large input:focus, .large textarea:focus {
    width: 360px;
}

.field-input.large {
    width: 365px;
    vertical-align: middle;
}

.k-widget.k-combobox {
    width: 100%;
}

.x-large input, .x-large textarea, .x-large .k-editor {
    width: 550px;
    transition: width .25s;
}

.x-large input:focus, .x-large textarea:focus {
    width: 560px;
}

.text-editor .k-editor {
    display: inline-block;
}

.field-input.x-large {
    width: 565px;
    vertical-align: middle;
}

.shadow {
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}

.copyright {
    width: 100%;
    text-align: center;
    padding: 10px 0 10px 0;
}

.theme-menu {
    width: 510px;
}

.theme-menu div {
    text-align: left;
    float: left;
    display: block;
    width: 110px;
    padding: 5px 0 5px 5px;
    margin: 10px 0 0 10px;
    cursor: pointer;
}

.theme-menu div:last-child {
    margin-bottom: 10px;
}

.language-menu {
    padding: 0 10px 10px 10px;
}

.language-menu div {
    margin-top: 10px;
    padding: 10px;
}

.language-menu div * {
    vertical-align: middle;
}

.k-menu.k-menu-horizontal {
/*    padding-left: 100px;
    padding-right: 100px;*/
}

.float-right {
    float: right !important;
}

.float-left {
    float: left !important;
}

.inline {
    display: inline-block;
}

.k-menu.k-menu-horizontal > .k-first, .k-menu.k-menu-horizontal > .k-last {
    border-left-width: 1px;
}

.k-menu.k-menu-horizontal li.float-right .k-animation-container {
    padding-right: 100px !important;
}

.k-checkbox-label:before {
    display: inline-block;
    position: inherit;
    margin: 0 5px 0 5px;
    vertical-align: middle;
}

.menu-user-info {
    width: 300px;
    padding-bottom: 20px;
}

.menu-user-info .avatar {
    display: inline-block;
    width: 80px;
    height: 80px;
    vertical-align: top;
    margin: 15px 15px 15px 25px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 40px;
}

.menu-user-field div {
    margin-top: 20px;
}

.k-button-icontext .k-sprite {
    margin: 0;
}

.k-button {
    margin-right: 5px;
}

ul.k-list {
    direction: ltr;
}

.mini-avatar {
    max-width: 20px;
    max-height: 20px;
    vertical-align: middle;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
}

.small-avatar {
    max-width: 35px;
    max-height: 35px;
    margin: 5px 0 5px 0;
    border-radius: 20px;
    vertical-align: middle;
    background-color: rgba(255, 255, 255, 0.5);
}

.auto-complete-text {
    vertical-align: middle;
    margin-left: 10px;
}

.multi-select .selected-value {
    vertical-align: middle;
    margin-left: 5px;
}

.k-content.tab {
    padding: 20px;
}

.radio-group .field-label {
    vertical-align: top;
}

.radio-option {
    margin-bottom: 10px;
}

.grid-thumb {
    max-width: 32px;
    max-height: 32px;
    vertical-align: middle;
    margin-right: 10px;
}

.login .copyright {
    position: absolute;
    bottom: 0;
}

.login-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../img/login-background.jpg');
    background-position: center;
    background-size: cover;
}

.login-background-filter {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
}

.login-form {
    margin: auto;
    background-color: white;
    text-align: left;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.login-form .field-label {
    width: 100px;
}

.index-logo {
    height: 85vh;
}

.index-logo img {
    position: absolute;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.payment-result-page {
    height: 85vh;
}

.payment-result {
    margin-top: 50%;
    margin-left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 400px;
    border-radius: 3px;
    padding: 30px 50px;
}

.payment-result * {
    vertical-align: middle;
}

.payment-result.success {
    color: green;
    border: 1px solid #57d657;
    background-color: #caffca;
}

.payment-result.error {
    color: red;
    border: 1px solid #d65757;
    background-color: #ffcaca;
}

.payment-result .k-font-icon {
    font-size: 30px;
    margin-right: 10px;
}

.payment-result .title {
    font-size: 30px;
    display: inline-block;
}

.rtl {
    direction: rtl;
}

.ltr {
    direction: ltr;
}

.rtl-input input {
    direction: rtl;
}

.dashboard-item {
    border-radius: 5px;
    border: 1px solid #d7d7d7;
    text-align: left;
}

.dashboard-item.info {
    border-top: 4px solid #337ab7;
}

.dashboard-item.error {
    border-top: 4px solid #e63f3f;
}

.dashboard-item.warning {
    border-top: 4px solid #f0ad4e;
}

.dashboard-item.success {
    border-top: 4px solid #2ecc71;
}

.dashboard-item .content {
    padding: 10px 15px;
}

.dashboard-item .footer {
    background-color: whitesmoke;
    padding: 10px;
    text-align: center;
    border-top: 1px solid #d7d7d7;
    border-radius: 0 0 5px 5px;
}

.dashboard-item .header {
    background-color: whitesmoke;
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #d7d7d7;
    border-radius: 5px 5px 0 0;
    font-weight: bold;
}

.dashboard-item .header * {
    vertical-align: middle;
}

.dashboard-item .header .k-font-icon {
    font-size: 24px;
}

.dashboard-item table {
    width: 100%;
}

.dashboard-item table .title {
    text-align: left;
    font-weight: bold;
}

.bold {
    font-weight: bold;
}

.content-middle * {
    vertical-align: middle;
}

.dashboard-item-container {
    padding: 20px;
    vertical-align: top;
}

.dashboard-item-container.small {
    width: 20%;
}

.dashboard-item-container.medium {
    width: 25%;
}

.dashboard-item-container.large {
    width: 80%;
}

#generatedUsers {
    display: none;
    margin-bottom: 20px;
    color: #006a00;
    text-align: center;
    direction: ltr;
}

#generatedUsers table {
    display: inline-block;
}

#generatedUsers th {
    padding: 0 10px;
}

#freeOnlineGeneratedUsers {
    display: none;
    margin-bottom: 20px;
    color: #006a00;
    text-align: center;
    direction: ltr;
}

#freeOnlineGeneratedUsers table {
    display: inline-block;
}

#freeOnlineGeneratedUsers th {
    padding: 0 10px;
}

.badge {
    padding: 1px 4px 0 4px;
    display: inline-block;
    border-radius: 3px;
    background-color: grey;
    color: white;
}

.badge.android {
    background-color: #a4c639;
}

.badge.ios {
    background-color: gray;
}

.badge.windowsPhone {
    background-color: #68217a;
}

.badge.windows {
    background-color: #0dadea;
}

.badge.macos {
    background-color: #4d66cc;
}

.badge.linux {
    background-color: #f47421;
}

.badge.expired {
    background-color: red;
}

.badge.success {
    background-color: green;
}

.badge.error {
    background-color: red;
}

.search-area {
    padding: 30px 0;
}

.search-area .operation {
    text-align: center;
}