@import "../../fonts/fonts.css";

body {
    background-color: #f4f4f4;
}

body * {
    font-family: Vazir;
}

/*********************
* Bootstrap RTL
*********************/
.mx-1 {
    margin-right: .375rem !important;
    margin-left: .375rem !important;
}


.content-page {
    margin-top: 92px !important;
}

.bg-lighten-success {
    background-color: #f4fff9;
}

.cursor-pointer {
    cursor: pointer;
}

.border-width-2px {
    border-width: 2px !important;
}

.user-card .edit-btn {
    top: 8px;
    left: 16px;
    height: min-content;
    padding: 5px;
}

.user-card .more {
    left: 15px;
    bottom: 2px;
    padding: 5px 8px;
}

.border-style-dashed {
    border-style: dashed !important;
}

.add-more-card {
    color: #a1a1a1;
    border-color: #c1c1c1 !important;
    min-height: 96px;
}

.card-box {
    border-radius: .6rem;
}

.btn:not(.btn-icon) {
    min-height: 37px;
    min-width: 75px;
}

.btn {
    border-radius: .4rem;
    font-size: 13px;
}

.btn-purple {
    background: #3B28CC;
}

.btn-purple:hover,
.btn-purple:focus {
    background: #3e2dc6 !important;
}

.btn-success {
    background: #37c57d;
}

.btn-success:hover,
.btn-success:focus {
    background: #00ab78 !important;
}

.btn-danger {
    background: #ff4444;
}

.btn-danger:hover,
.btn-danger:focus {
    background: #ba1616 !important;
}

.titime-avatar {
    border-width: 2px !important;
    border-style: solid !important;
    padding: 2px !important;
    background: #fff;
}

.titime-avatar-badge {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    bottom: 6%;
    right: 6px;
}

.titime-avatar.avatar-red {
    border-color: #ff4444 !important;
}

.titime-avatar.avatar-yellow {
    border-color: #ff8303 !important;
}

.titime-avatar.avatar-red+span.titime-avatar-badge {
    background: #ff4444 !important;
}

.titime-avatar.avatar-green {
    border-color: #37c57d !important;
}

.titime-avatar.avatar-green+span.titime-avatar-badge {
    background: #37c57d !important;
}

.titime-avatar.avatar-purple {
    border-color: #3B28CC !important;
}

.titime-avatar.avatar-purple+span.titime-avatar-badge {
    background: #3B28CC !important;
}

.titime-avatar.avatar-blue {
    border-color: #2891cc !important;
}

.titime-avatar.avatar-blue+span.titime-avatar-badge {
    background: #2891cc !important;
}

.titime-avatar.avatar-light {
    border-color: #8e8e8e !important;
}

.titime-avatar.avatar-light+span.titime-avatar-badge {
    background: #8e8e8e !important;
}

.text-purple {
    color: #3B28CC !important;
}

.text-danger {
    color: #ff4444 !important;
}

.text-success {
    color: #37c57d !important;
}

.text-info {
    color: #2891cc !important;
}

.text-warning {
    color: #f1bf3d !important;
}

.border-purple {
    border-color: #3B28CC !important;
}

.border-danger {
    border-color: #ff4444 !important;
}

.border-success {
    border-color: #37c57d !important;
}

.border-info {
    border-color: #2891cc !important;
}

.border-warning {
    border-color: #f1bf3d !important;
}

.bg-purple {
    background-color: #3B28CC !important;
}

.bg-danger {
    background-color: #ff4444 !important;
}

.bg-success {
    background-color: #37c57d !important;
}

.bg-info {
    background-color: #2891cc !important;
}

.bg-warning {
    background-color: #f1bf3d !important;
}

.bg-gray {
    background-color: #f4f4f4 !important;
}

.user_avatar_bg {
    background-image: url(../images/default.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.app_icon_bg {
    background-image: url(../images/icon.png);
    background-repeat: no-repeat;
    background-size: 102%;
    background-position: center;
}

.banner_icon_bg {
    background-image: url(../images/default-placeholder.png);
    background-repeat: no-repeat;
    background-size: 102%;
    background-position: center;
}

.bg-soft-purple {
    background-color: #3B28CC15 !important;
}

.bg-soft-danger {
    background-color: #ff444415 !important;
}

.bg-soft-success {
    background-color: #37c57d15 !important;
}

.bg-soft-info {
    background-color: #2891cc15 !important;
}

.bg-soft-warning {
    background-color: #f1bf3d15 !important;
}

.bg-soft-gray {
    background-color: #f4f4f415 !important;
}

input.form-control {
    border-radius: .4rem;
}

select.form-control {
    border-radius: .4rem;
}

input.date-picker {
    border-radius: .4rem 0 0 .4rem !important;
}

span.span-control {
    border-radius: 0 .4rem .4rem 0;
}

span.cancel-search {
    border-radius: .4rem 0 0 .4rem;
}

.rounded-4rem {
    border-radius: .4rem !important;
}

.rounded-6rem {
    border-radius: .6rem !important;
}

.rounded-9rem {
    border-radius: .9rem !important;
}

.select2.select2-container,
.select2.select2-container .select2-selection {
    border-radius: .4rem !important;
}

.custom-control-input:checked~.custom-control-label::before {
    background-color: #3B28CC !important;
    border-color: #3e2dc6 !important;
}

.add-more-card {
    transition: all .5s;
}

.add-more-card:hover {
    background-color: #3B28CC15 !important;
    border-color: #3B28CC !important;
    color: #3B28CC !important;
}

.spinner {
    border-left: 5px solid #3B28CC;
}

#sidebar-menu>ul>li {
    padding-top: 0 !important;
}

#sidebar-menu>ul>li>a {
    padding: 8px .375rem !important;
    color: #555;
}

#sidebar-menu>ul>li>a:hover {
    background-color: #3B28CC10 !important;
    color: #3B28CC !important;
}

#sidebar-menu>ul>li.mm-active>a {
    background-color: #3B28CC20 !important;
    color: #3B28CC !important;
}

#sidebar-menu>ul>li>a i.fa-angle-left {
    margin: 2px 0 0 0 !important;
}

.organization-info {
    box-sizing: border-box;
    padding: 0 8px;
    margin-bottom: 15px;
}

.organization-info .content {
    padding: 17px 0;
}

.organization-info .content p:nth-child(2) {
    padding: 1px 10px;
}

.organization-info .switch-organization {
    left: 7px;
    margin: auto;
    width: 25px;
    height: 25px;
    background-color: #fff;
    top: -5px;
    transform: translateY(50%);
    border-radius: 50%;
    border: 2px solid #d1ccef;
}

.organization-info .switch-organization i {
    margin-top: 3px;
}

footer.footer {
    background-color: #e2e2e2;
}

.download-timesheet {
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    transform: translateY(50%);
    display: inline-block;
    background: #efedfb;
    width: max-content;
    padding: 3px 30px 3px 12px;
    border-radius: 6rem;
    border: 1px solid #3b28cc;
    font-size: 11px;
    font-weight: bold;
    color: #3b28cc;
}

.download-timesheet i {
    right: 9px;
    bottom: 0;
    transform: translateY(14%);
}

.modal-custom-picker {
    width: 380px;
    right: 0;
    left: 0;
    margin: auto;
    top: 50px;
    background: #fff;
}

.custom-date-selector {
    padding: 8px 0;
}

.custom-date-selector>div {
    width: 100px;
    position: relative;
}

.custom-date-selector>div:not(:last-child) {
    margin-left: 5px;
}

.custom-date-selector li {
    padding: 9px 0;
}

.custom-date-selector>div:before {
    content: '';
    display: block;
    position: absolute;
    width: 100px;
    height: 40px;
    align-self: center;
    border-radius: 1rem;
    background: #fff;
    top: 50%;
    transform: translateY(-50%);
    border: 2px solid #3B28CC;
    z-index: 99;
}

.custom-date-selector ul {
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
    top: 44px;
    transition: all .3s;
    margin: auto;
}

.modal-custom-picker .body .selected-info span {
    padding: 2px 8px !important;
}

.modal-custom-picker .body .picker>div span {
    position: absolute;
    width: 17px;
    height: 17px;
    background: #3B28CC;
    border-radius: 50%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1000;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

.modal-custom-picker .body .picker>div span.next {
    top: 36%;
    transform: translateY(-50%);
}

.modal-custom-picker .body .picker>div span.prev {
    bottom: 36%;
    transform: translateY(50%);
}

.plan-card {
    padding: 8px 25px;
    position: relative;
    transition: all .5s;
}

.plan-card span.marker {
    position: absolute;
    height: 11px;
    width: 17px;
    border-radius: 5px 0 0 5px;
    background: #de3232;
    right: 0;
    top: 14px;
}

.plan-card:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 7px 0 11px 0;
    background: #3B28CC;
    opacity: 0;
    transition: all .3s;
}

.plan-card.active:before {
    opacity: 1;
}

.plan-card:after {
    content: "\f00c";
    display: block;
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    color: #fff;
    font-weight: 900;
    top: 1px;
    left: 3px;
    font-size: 8px;
    opacity: 0;
    transition: all .3s;
}

.plan-card.active:after {
    opacity: 1;
}

.cancel-logo {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    bottom: 13px;
    right: 0;
    left: 24px;
    margin: auto;
    transform: translateX(-183%);
    border-radius: 50%;
    background: #3B28CC;
    color: #fff;
    font-size: 18px;
    border: 3px solid #fff !important;
    box-sizing: content-box;
}

.camera-logo {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    bottom: 19px;
    right: 0;
    left: 24px;
    margin: auto;
    transform: translateX(-183%);
    border-radius: 50%;
    background-image: url('../../panel/images/ic_camera.png');
    background-color: #3B28CC;
    background-size: 13px;
    background-position: center 5px;
    background-repeat: no-repeat;
    color: #fff;
    font-size: 18px;
    border: 3px solid #fff !important;
    box-sizing: content-box;
}

.day_time_box {}

input.no-boxed {
    border: 0px !important;
}

.custom-number-input1 {}

.custom-number-input1 .input-boxed {
    border: 1px solid #ccc !important;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
}

.custom-number-input1 .input-boxed input {
    width: 150px;
    margin: 0 auto;
    text-align: center;
}

.custom-number-input1 .input-boxed span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #f1f1f1;
    border-radius: 50%;
    text-align: center;
    font-size: 19px;
    line-height: 34px;
}

.custom-number-input1 .input-boxed span.left-btn {
    left: 9px;
    padding-right: 2px;
}

.custom-number-input1 .input-boxed span.right-btn {
    right: 9px;
    padding-left: 2px;
}

.custom-number-input1>label {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
    width: min-content;
    z-index: 9;
    transform: translateY(-60%);
    background: #fff;
    padding: 0 15px;
}

.app-item-container {
    margin-bottom: 40px;
    cursor: pointer;
}

.app-item-container .app-item-container {
    display: inline-block;
}

.application,
.group-application {
    width: 110px;
    height: 110px;
}

.group-application {
    background: rgb(230, 230, 230);
    background: linear-gradient(135deg, #e6e6e670 18%, #c4c4c44d 41%, #e6e6e636 61%);
    box-shadow: 0 0 14px -10px #000;
    border-radius: .9rem;
    padding: 7px;
    border: 1px solid #eaeaea;
    transition: all .3s;
}

.application img {
    width: 100%;
    height: 100%;
}

.group-application .app-item-container:nth-child(n+5) {
    display: none !important;
}

.group-application .app-item-container {
    margin-bottom: 3px;
}

.group-application .app-item-container .application {
    width: 45px;
    height: 45px;
}

.group-application .app-item-container h6 {
    display: none;
}

.group-application .app-item-container .application> :not(img) {
    display: none !important;
}

.application-limits .card-box .inbox-widget {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
    height: calc(80vh - 130px) !important;
}

.application-limits .card-box .inbox-widget::-webkit-scrollbar,
#show_cat .apps::-webkit-scrollbar {
    width: 7px;
    border-radius: 50%;
}

.application-limits .card-box .inbox-widget::-webkit-scrollbar-track,
#show_cat .apps::-webkit-scrollbar-track {
    background-color: rgba(91, 105, 188, .25);
    border-radius: .6rem;
}

.application-limits .card-box .inbox-widget::-webkit-scrollbar-thumb,
#show_cat .apps::-webkit-scrollbar-thumb {
    background-color: #3B28CC;
    border-radius: .6rem;
}

.setting .custom-scroll {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
    height: calc(100% - 1.5rem - 40px);
}

.setting .custom-scroll::-webkit-scrollbar {
    width: 7px;
    border-radius: 50%;
}

.setting .custom-scroll::-webkit-scrollbar-track {
    background-color: rgba(91, 105, 188, .25);
    border-radius: .6rem;
}

.setting .custom-scroll::-webkit-scrollbar-thumb {
    background-color: #3B28CC;
    border-radius: .6rem;
}

.setting-title {
    padding: 24px 24px 0 24px;
}

.app-item-container .cover {
    opacity: 0;
    background: #ffffffc9;
    border-radius: .9rem;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all .3s;
    top: 0;
    right: 0;
    left: 0;
    backdrop-filter: blur(3px);
}

.app-item-container:hover .cover {
    opacity: 1;
}

.app-item-container:hover .cover span {
    transition: all .3s;
    border-radius: .4rem;
}

.app-item-container:hover .cover span:hover {
    background: #fff;
    color: #3B28CC;
}

.app-item-container:hover .cover span.delete:hover {
    color: #ff4444;
}

#show_cat {
    width: calc(100% - 25px);
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 100%;
    overflow: auto;
    background: #0000005e;
    backdrop-filter: blur(8px);
    border-radius: .6rem;
}

#show_cat .apps .application {
    width: 80px;
    height: 80px;
}

#show_cat .apps {
    position: absolute;
    bottom: 50px;
    width: 390px;
    height: 390px;
    left: 0;
    right: 0;
    margin: auto;
    background: #ffffffa8;
    padding: 10px;
    border-radius: .9rem;
    border: 1px solid #8e8e8e;
    box-shadow: 0 0 11px -5px #000;
    overflow-x: hidden;
    overflow-y: auto;
}

#show_cat .apps .app-item-container {
    margin: 10px !important;
}

#show_cat .title {
    position: absolute;
    top: 0;
    width: 270px;
    left: 61px;
    background: #ffffffa8;
    padding: 12px;
    font-size: 21px;
    border-radius: .9rem;
    border: 1px solid #8e8e8e;
    box-shadow: 0 0 11px -5px #000;
}

#show_cat .cat-bar {
    position: absolute;
    top: 50px;
    right: 0;
    width: 390px;
    left: 0;
    margin: auto;
}

#show_cat .cat-bar span {
    font-weight: 700;
    cursor: pointer;
    font-size: 35px;
    color: #000;
    width: 57px;
    height: 57px;
    display: block;
    line-height: 62px;
    text-align: center;
    background: #ffffffa8;
    box-shadow: 0 0 11px -5px #000;
    border-radius: .9rem;
}

#show_cat .edit-bar {
    position: absolute;
    top: 116px;
    right: 0;
    width: 390px;
    left: 0;
    margin: auto;
}

#show_cat .edit-bar span,
select {
    font-weight: 700;
    cursor: pointer;
    font-size: 18px;
    color: #000;
    width: 57px;
    height: 57px;
    display: inline-block;
    line-height: 62px;
    text-align: center;
    background: #ffffffa8;
    box-shadow: 0 0 11px -5px #000;
    border-radius: .9rem;
}

#show_cat .edit-bar .cat-edit {
    position: relative;
    right: 271px;
}

#show_cat .apps .cover {
    display: none !important;
}

.weektabs>div {
    width: 120px;
}

[id^=map] {
    z-index: 1;
}

.with-badge {
    overflow: hidden;
}

.with-badge.active::before {
    display: block;
    position: absolute;
    content: '';
    background: #3e2dc6;
    top: 8px;
    left: 8px;
    padding: 4px;
}

.with-badge::before {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    content: '';
    background: #3e2dc6;
    border-radius: 50%;
    top: 8px;
    z-index: 1;
    left: 8px;
    transition: .5s;
    padding: 110%;
    transform: translateY(-50%) translateX(-50%);
}

.with-badge h4 {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 55;
    color: #fff;
    transition: .5s;
}

#add_limitation_group {
    width: 35px;
    height: 35px;
    position: absolute;
    text-align: center;
    line-height: 40px;
    left: 30px;
    font-size: 14px;
}

.rules-container [data-weekday],
.rules-container [data-month-day] {
    padding: 20px 15px;
}

.rules-container [data-weekday]>h5,
.rules-container [data-month-day]>h5 {
    position: absolute;
    top: 0;
    margin: 0;
    background: #fff;
    transform: translateY(-50%);
    padding: 0 18px;
}

.rules-container p[data-picker-target] {
    margin: 0;
}

table th,
table td {
    text-align: center;
    vertical-align: middle !important;
}

.input-group .parsley-errors-list {
    width: 100% !important;
}

#form_sync_category_parent input[type=checkbox] {
    width: 30px;
    margin: auto;
}

.card-box.setting-card {
    height: 100px;
    vertical-align: middle !important;

}

.custom-btn {
    color: #fff !important;
    width: 35px;
    height: 35px;
    margin: 0;
    padding: 0;
    line-height: 35px;
}

#show_cat .app-item-container {
    cursor: unset;
}

#show_cat .app-item-container [data-action=delete] {
    position: absolute;
    right: -5px;
    top: -5px;
    background: #de3232;
    color: #fff;
    width: 30px;
    height: 30px;
    line-height: 31px;
    border-radius: .6rem;
    z-index: 20;
    opacity: 0;
    transition: all .1s;
}

#show_cat .app-item-container:hover [data-action=delete] {
    opacity: 1;
    cursor: pointer;
    right: 0;
    top: 0;
}

.timepicker-close {
    position: absolute;
    left: 15px;
    top: 4px;
}

.overflow-ellipsis {
    width: 90%;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-sms {
    padding: 20px;
}

.custom-sms span {
    float: left;
}

.banner {
    position: relative;
    overflow: hidden;
    border-radius: .6rem;
    height: 200px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover !important;
}

.banner-img {
    width: 100%;
}

.banner-title {
    position: absolute;
    bottom: -10px;
    padding: 10px;
    width: 100%;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,eaeaea+71,eaeaea+78,eaeaea+81,eaeaea+88&0.6+4,0.52+46,0.55+46,0.41+100 */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(254, 254, 254, 0.6) 4%, rgba(241, 241, 241, 0.55) 46%, rgba(234, 234, 234, 0.49) 71%, rgba(234, 234, 234, 0.47) 78%, rgba(234, 234, 234, 0.46) 81%, rgba(234, 234, 234, 0.44) 88%, rgba(234, 234, 234, 0.41) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(254, 254, 254, 0.6) 4%, rgba(241, 241, 241, 0.55) 46%, rgba(234, 234, 234, 0.49) 71%, rgba(234, 234, 234, 0.47) 78%, rgba(234, 234, 234, 0.46) 81%, rgba(234, 234, 234, 0.44) 88%, rgba(234, 234, 234, 0.41) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(254, 254, 254, 0.6) 4%, rgba(241, 241, 241, 0.55) 46%, rgba(234, 234, 234, 0.49) 71%, rgba(234, 234, 234, 0.47) 78%, rgba(234, 234, 234, 0.46) 81%, rgba(234, 234, 234, 0.44) 88%, rgba(234, 234, 234, 0.41) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99ffffff', endColorstr='#69eaeaea', GradientType=0);
    /* IE6-9 */

}


.ck[role=toolbar] {
    border-radius: .4rem .4rem 0 0 !important;
}

.ck.ck-content {
    border-radius: 0 0 .4rem .4rem !important;
    height: 130px;
    overflow: hidden;
}

.navbar-custom {
    z-index: 1040;
}

.gateway-icon {
    height: 50px;
    width: 50px;
    /*position: absolute;*/
    top: 0;
    right: 0;
}

.gateway-card {
    padding: 8px 25px;
    position: relative;
    transition: all .5s;
    height: 50px;
    overflow: hidden;

}

.gateway-card span.marker {
    position: absolute;
    height: 11px;
    width: 17px;
    border-radius: 5px 0 0 5px;
    background: #de3232;
    right: 0;
    top: 14px;
}

.gateway-card:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 7px 0 11px 0;
    background: #3B28CC;
    opacity: 0;
    transition: all .3s;
}

.gateway-card.active:before {
    opacity: 1;
}

.gateway-card:after {
    content: "\f00c";
    display: block;
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    color: #fff;
    font-weight: 900;
    top: 1px;
    left: 3px;
    font-size: 8px;
    opacity: 0;
    transition: all .3s;
}

.gateway-card.active:after {
    opacity: 1;
}

.td-overflow {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.direction-ltr {
    direction: ltr;
}

.rotate-animation {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: SpinnerAnimation 1.1s infinite linear;
    animation: SpinnerAnimation 1.1s infinite linear;
}

.btn-admin-back {
    margin-right: 65% !important;
    margin-top: 1% !important;
}