/* arabic */
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Tajawal-Regular.ttf');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

/* arabic */
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/Tajawal-Bold.ttf');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

@font-face {
    font-family: 'DroidSans';
    font-weight: 400;
    font-style: normal;
    src: url('/fonts/DroidSans-webfont.eot');
    src: url('/fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/DroidSans-webfont.woff') format('woff'), url('/fonts/DroidSans-webfont.ttf') format('truetype'), url('/fonts/DroidSans-webfont.svg#droid_sansregular') format('svg');
}

@font-face {
    font-family: 'DroidSans';
    font-weight: 500;
    font-style: normal;
    src: url('/fonts/DroidSans-Bold-webfont.eot');
    src: url('/fonts/DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/DroidSans-Bold-webfont.woff') format('woff'), url('/fonts/DroidSans-Bold-webfont.ttf') format('truetype'), url('/fonts/DroidSans-Bold-webfont.svg#droid_sansbold') format('svg');
}

.m-nav--inline li {
    display: inline-block !important;
}

.m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-topbar__notifications.m-topbar__notifications--img.m-dropdown--arrow .m-dropdown__arrow {
    color: #5499f8;
}

.m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-topbar__user-profile.m-topbar__user-profile--img.m-dropdown--arrow .m-dropdown__arrow {
    color: #5499f8;
}

.form-group {
    margin-bottom: 1rem;
}
.form-control {
    font-family: 'DroidSans', 'Tajawal';
}

.m-nav--inline li {
    display: inline-block !important;
}

.btn {
    font-family: 'DroidSans', 'Tajawal';
}

.invalid-feedback {
    font-size: unset;
}

.m-subheader .m-subheader__breadcrumbs.m-nav > .m-nav__separator {
    padding: 0 10px;
    color: #898b96;
}

.typeahead-item {
    color: black;
}

.typeahead-img {
    display: inline-block;
    margin: 0 10px;
}

.typeahead-desc {
    display: inline-block;
    vertical-align: middle;
}

.m-login.m-login--6 .m-login__wrapper .m-login__body .m-login__signin .m-login__options > a {
    flex:0.48
}
[data-form-status="Read"] .custom-file {
    display: none;
}


form:not([data-form-status="Read"]) .no-file {
    display: none;
}
    /*this is because btn-outline-brand shows hover effect when button group is disabled*/
    .btn-group .btn-outline-brand.disabled:hover {
        cursor: default;
    }
    .btn-group .btn-outline-brand.disabled:not(.active):hover {
    color: #4ba8ff !important;
    background: inherit;
    -webkit-box-shadow: 0px 5px 10px 2px rgba(75, 168, 255, 0.19) !important;
    box-shadow: 0px 5px 10px 2px rgba(75, 168, 255, 0.19) !important;
}

    .info-content{
        padding:5px 10px;
    }
    .clickable:hover{
        cursor:pointer;
    }
.clickable:hover, .table-striped tbody tr.clickable:nth-of-type(odd):hover {
    cursor: pointer;
    background-color: #dddddd;
}
form:not([data-form-status="Read"]) .show-on-form-read {
    display: none;
}

.sticky-element {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top:130px;
}

i[data-toggle="m-tooltip"] {
    color: #4ba8ff;
    margin: 0 5px;
}


.kt-header__topbar .kt-header__topbar-item .kt-header__topbar-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 10px 20px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 4px;
}

.kt-header .kt-header__topbar .kt-header__topbar-item:hover .kt-header__topbar-text, .kt-header .kt-header__topbar .kt-header__topbar-item.show .kt-header__topbar-text {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    background-color: rgba(77, 89, 149, 0.06);
}

.kt-header__topbar .kt-header__topbar-item .kt-header__topbar-text i {
    font-size: 20px;
    margin: 0px 5px;
}

.lang-link {
    align-items: center;
    display: flex;
}

.btn-group-container{
    cursor:pointer;
}

.portlet-action-form{
    display:inline;
}

.kt-wizard-v1 .kt-wizard-v1__wrapper .kt-form .kt-wizard-v1__content {
    border-bottom: unset !important;
}

.kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-login__options > a{
    margin:0px 20px;
}

.inline-ele{
    display:inline;
}
.form-control[readonly] {
    background-color:#fafafa;
}


.payment-method-card {
    width: 160px;
    padding: 20px;
    margin: 0px 5px;
    border: solid 1px white;
    border-radius: 5px;
}
    .payment-method-card img{
        width:100%;
        text-align:center;
    }
    .payment-method-card .title {
        text-align: center;
    }


    .payment-method-card.active {
        border: solid 1px;
        
    }

        .payment-method-card.active:hover {
            border: solid 1px;
            background-color: unset;
        }

    .payment-method-card:hover {
        cursor: pointer;
        background-color:lightgray;
    }

.terms:hover {
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dotted;
}

.option {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1.4em;
    border: 1px solid #EBEDF3;
    border-radius: 0.42rem;
}

.option .option-control {
    width: 2.7rem;
    padding-top: 0.1rem;
}

.option .option-label .option-body {
    display: block;
    padding-top: 0.7rem;
    font-size: 0.9rem;
    color: #B5B5C3;
}


.option .option-label .option-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.option .option-label .option-head .option-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #3F4254;
}

.option .option-label .option-head .option-focus {
    font-size: 1.1rem;
    font-weight: 600;
    color: #181C32;
}

/*.editable-table td {
    padding: 0;
}

.editable-table .form-group {
    margin: 0;
}*/

div.hidden-container {
    height: 0;
    opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}
div.visible-container {
    height: auto; opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}


.lg-image {
    width: 100%;
    position: relative;
}

.btn-success {
    background-color: var(--success-color-500);
    border-color: var(--success-color-500);
}

    .btn-success:hover, .btn-success:active, .btn-success:focus,
    .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle {
        background-color: var(--success-color-800);
        border-color: var(--success-color-800);
    }

.btn-primary, .btn-brand,
.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--primary-color-500);
    border-color: var(--primary-color-500);
}

    .btn-primary:hover, .btn-primary:active, .btn-primary:focus,
    .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle,
    .btn-brand:hover, .btn-brand:active, .btn-brand:focus,
    .btn-brand:not(:disabled):not(.disabled):active, .btn-brand:not(:disabled):not(.disabled).active, .show > .btn-brand.dropdown-toggle {
        background-color: var(--primary-color-800);
        border-color: var(--primary-color-800);
    }


.btn-outline-brand:not(:disabled):not(.disabled):active, .btn-outline-brand:not(:disabled):not(.disabled).active, .show > .btn-outline-brand.dropdown-toggle,
.btn-outline-brand:hover {
    background-color: var(--primary-color-500);
    border-color: var(--primary-color-500);
}

.btn-outline-brand {
    color: var(--primary-color-500);
    border-color: var(--primary-color-500);
}

@media only screen and (max-width: 1007px) {
    #welcome-message {
        text-align: center;
        display: block;
    }

    #footer {
        text-align: center;
    }

    .lg-image {
        width: 20%;
        margin-top: 2rem;
    }
}



.flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    margin-left: 500px;
    margin-top: 30px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: #bbb;
    color: black;
}

.flip-card-back {
    background-color: #fdfdfd;
    color: rgb(7, 7, 7);
    transform: rotateY(180deg);
    padding-top: 140px;
    padding-bottom: -140px;
}

.flip-card-front img {
    width: 300px;
    height: 300px;
}
.subscription-label {
    margin-left: auto !important;
    margin-top: 19px !important;
}

.subscription-dropdown {
    width: 364px;
    margin-left: 10px;
    margin-top: 8px;
    margin-right: 104px;
}
@media (max-width: 991px) {
    .mob-style {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .social-icons-style {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .m-margin {
        margin-bottom: 10px;
    }
    .mob-center{
        justify-content:center;
    }
}