@keyframes rotateOut {
   0%{
      transform: rotate(-180deg);
   }
   100%{
      transform: rotate(180deg);
   }
}
@font-face {
   font-family: 'iranyekan';
   src: url("../fonts/iranyekan/eot/iranyekanwebregular.eot?#"),
   url("../fonts/iranyekan/ttf/iranyekanwebregular.ttf") format('truetype'),
   url("../fonts/iranyekan/woff/iranyekanwebregular.woff") format('woff'),
   url("../fonts/iranyekan/svg/iranyekanwebregular.svg") format('svg');
}
@font-face {
   font-family: 'iranyekan_number';
   src: url("../fonts/iranyekan_numbers/eot/iranyekanwebregular(fanum).eot?#"),
   url("../fonts/iranyekan_numbers/ttf/iranyekanwebregular(fanum).ttf") format('truetype'),
   url("../fonts/iranyekan_numbers/woff/iranyekanwebregular(fanum).woff") format('woff'),
   url("../fonts/iranyekan_numbers/svg/iranyekanwebregular(fanum).svg") format('svg');
}
:root{
   /* --bs-btn-active-bg:#24695c; */
   --bs-btn-active-color:#fffff ;
   --bs-btn-color: #fffff;
}

body{
   font-family:'iranyekan_number','iranyekan';
   direction: rtl;
   color:#181c32;
   background-color:#f5f7fb ;
   position: relative;
   overflow-x: hidden;
   user-select: none;
}
*{
   box-sizing: border-box;
   font-size: 14px;
}
p{
   line-height: 1.7;
   letter-spacing: inherit;
}
a{
   text-decoration: none;
   color:#3f4254 ;
}
ul{
   list-style-type: none;
   padding: 0;
   margin: 0;
}
.btn-theme-color{
   color: #24695c;
   border: 1px solid #24695c;
}
.btn-theme-color:focus,.btn-theme-color:active,.btn-theme-color:hover{
   background-color: #24695c;
   color: #ffffff;
}
.btn-gradient{
   background: -webkit-linear-gradient( -180deg, #7ccdbe,#24695c);
   background: -o-linear-gradient( -180deg, #7ccdbe,#24695c );
   background: -moz-linear-gradient( -180deg, #7ccdbe,#24695c );
   background: linear-gradient( -180deg,#7ccdbe,#24695c);
}
.btn-gradient2{
   background: -webkit-linear-gradient( -180deg, #e6c5a8,#ba895d);
   background: -o-linear-gradient( -180deg, #e6c5a8,#ba895d );
   background: -moz-linear-gradient( -180deg, #e6c5a8,#ba895d );
   background: linear-gradient( -180deg,#e6c5a8,#ba895d);
}
.btn-showMore{
   padding: 8px 15px;
   color: #ffffff;
   outline: none;
   border: 0;
   font-weight: bolder;
   border-radius: 5px;
}
.card-body .btn-showMore span{
   font-size: 14px;
}
.fs-12{
   font-size: 12px;
}
.fs-8{
   font-size: 8px;
}
.theme-color{
   color: #24695c;
}
.font-icon{
   width: 2.5rem;
   display: inline-block;
   line-height:1;
   vertical-align:middle;
}
.font-icon2{
   width: 2.5rem;
}

.box-shadow{
   box-shadow: 0 0 50px 0 rgb(82 63 105 / 15%);
}
.form-check-solid{
   width: 10px;
   margin-bottom: 0;
}
.form-check-input:focus{
   box-shadow: none;
   border-color: transparent;
}
.form-check .form-check-input{
   float: none;
}
.form-check-input {
   border: none;
   box-shadow: none;
   width:1.2rem;
   height:1.2rem;
   border-radius: 5px;
   background-color:#D7E1DEFF;
   vertical-align:middle;
   margin-top: 0;
}
.form-check-input:checked {
   background-color:#24695c;
   border: none;
   box-shadow: none;
}

/* style sidebar */
.sidebar{
   position: fixed;
   top: 0;
   bottom:0 ;
   z-index: 1021;
   border-left: 1px solid #e6edef;
   transition:all 0.5s;
   padding: 0;
}
.sidebar-user{
   width: 100%;
   padding: 15px;
   text-align: center;
   border-bottom: 1px solid #e6edef;
}
.setting-list{
   width: 30px;
   height: 30px;
   border-radius:100%;
   background-color:rgba(36, 105, 92, 0.2) ;
   transition: all 0.3s;
}
.setting-list a:link,.setting-list a:visited{
   display: block;
   text-decoration: none;
}
#edit-profile a{
   animation: rotateOut 5s linear infinite;
}
.setting-list a i{
   color:#24695c ;
   font-size: 15px;
   padding-top: 5px;
}
.setting-list:hover{
   background-color:#24695c;
}
.setting-list:hover i{
   color: white;
}
.sidebar-user a:link,.sidebar-user a:visited{
   text-decoration: none;
   display: block;
}
.user-profile:link,.user-profile:visited{
   width: 90px;
   height: 90px;
   border: 10px solid rgba(36, 105, 92, 0.2);
   margin:-30px auto;
   border-radius: 100%;
}
.user-profile img{
   width: 100%;
   height: 100%;
   border-radius: 100%;
}
.sidebar-user h6{
   font-weight:bolder;
   color:#24695c ;
   margin: 35px 0 0 0;
}
.sidebar-user #user-number{
   color:#999;
   font-family: "Roboto Thin";
}
.sidebar-user ul{
   list-style-type: none;
   margin:10px 0 -20px 0;
   padding: 0;
   display: flex;
   justify-content: space-around;
}
.sidebar-user ul li{
   position: relative;
}
.sidebar-user ul li:first-child:before{
   display: none;
}
.sidebar-user ul li::before{
   content: "";
   width: 2px;
   height: 15px;
   background-color: #e6edef;
   position: absolute;
   top: 14px;
   right:-15px;
}
.sidebar-user ul li span{
   font-weight: bolder;
   font-size: 16px;
}
.sidebar-user ul li p{
   font-size: 12px;
   color: #999;
}
#sidebar-menu{
   overflow-y:scroll;
   overflow-x: hidden;
   height:calc(100vh - 244px);
   margin: 10px 0 50px;
   z-index: 1;
}
#sidebar-menu::-webkit-scrollbar{
   width: 8px;
}
#sidebar-menu::-webkit-scrollbar-thumb{
   background-color:rgba(36, 105, 92, 0.2);
   border-radius: 10px;
}
ul.nav-bar .nav-item{
   border-radius:6px;
   transition: all 0.3s linear;

}
ul.nav-bar .nav-item .nav-link{
   display: block;
   text-align: right;
   border-radius:6px ;
   margin-bottom: 5px;
   padding: 14px 16px;

}
.nav-link i.fa-angle-left{
   float: left;
   padding-top: 3px;
   transition: transform .35s ease;
   transform-origin: .5em 50%;
}
.nav-link[aria-expanded="true"] i.fa-angle-left {
   transform: rotate(-90deg);
}
ul.list-collapse a:link,ul.list-collapse a:visited{
   text-decoration: none;
   display: block;
   border-radius: 6px;
   padding:10px 16px;
   margin-bottom:4px;
   /*color: #222222;*/
   transition: all 0.3s;
}
ul.list-collapse a:hover{
   background-color:#d7e1de ;
   color:#24695c ;
   transition: all 0.3s;

}
ul.nav-bar .nav-item .nav-link:hover{
   /* background:#24695c ; */
   background: -webkit-linear-gradient( -180deg, #7ccdbe, #24695c);
   background: -o-linear-gradient( -180deg, #7ccdbe, #24695c);
   background: -moz-linear-gradient( -180deg, #7ccdbe, #24695c);
   background: linear-gradient( -180deg,#7ccdbe,#24695c);
   color:#d0efe9;
   transition: all .3s;
   cursor: pointer;
}
ul.nav-bar a.active{
   /* background:#24695c ; */
   background: -webkit-linear-gradient( -180deg, #7ccdbe, #24695c);
   background: -o-linear-gradient( -180deg, #7ccdbe, #24695c);
   background: -moz-linear-gradient( -180deg, #7ccdbe, #24695c);
   background: linear-gradient( -180deg,#7ccdbe,#24695c);
   color:#d0efe9;
   transition: all .3s;
   cursor: pointer;
}
ul.list-collapse a.active-two{
   background-color:#d7e1de ;
   color:#24695c ;
   transition: all 0.3s;
}
/*style header*/
.top-header{
   position: fixed;
   left: 0;
   right: 0;
   z-index: 1020;
}
.close,.close:hover,.close:focus{
   border: 1px solid #24695c;
   color: #24695c;
   transition: all 0.5s;

}
.border-bottom{
   border-bottom: 1px groove #eee;
}
.btn-outline-cinnamon{
   color: #ba895d ;
   border-color:#ba895d  ;
   padding: 5px 15px;
   font-weight: bold;
}
.btn-outline-cinnamon:hover{
   color: white;
   border-color:#ba895d;
   background: -webkit-linear-gradient( -180deg, #e6c5a8,#ba895d);
   background: -o-linear-gradient( -180deg, #e6c5a8,#ba895d );
   background: -moz-linear-gradient( -180deg, #e6c5a8,#ba895d );
   background: linear-gradient( -180deg,#e6c5a8,#ba895d);
   /* background-color:#ba895d; */
   transition: all .3s linear;
}
.form-control:focus{
   box-shadow:0 0 0 0.2rem rgb(171 140 228 / 5%);
   border-color:#e6edef;
}
.form-label,.col-form-label{
   font-weight: bolder;
   color: #59667a;
}
ul#main-nav li a i{
   float: left;
   padding-top: 3px;
}
ul#main-nav li ul{
   display: none;
}
#btn-exit{
   border: 1px solid #24695c ;
   color:#24695c ;
   transition: all 0.5s;
}
#btn-exit:hover{
   color: white;
   background-color: #24695c;
   transition: all 0.5s;
}
/*hamburger button code*/
.hamburger-button,.closed{
   border:none;
   background: 0;
   width: 25px;
   height: 25px;
   cursor: pointer;
   padding:0 0.2rem;
}
.hamburger-button:focus,.closed:focus{
   outline: 0;
}
.closed{
   float: left;
}
.hamburger-button span,.closed span{
   display: block;
   height: 2px;
   margin: 5px auto;
   border-radius: 20px;
   background: #242934;
   transition: all 0.8s;
}

#dashboard h3{
   font-weight: bolder;
   font-size: 24px;
}
#btn-newTask{
   float: left;
   outline: 0;
   border: 0;
   font-size: 14px;
   color: white;
   background-color:#24695c ;
   padding: 8px 25px;
   border-radius: 5px;
   margin-left: 10px;
}
#dashboard label{
   color: black;
}
.my-task{
   position: relative;
}
.my-task .badge-comment{
   background-color:#dc3545;
   border-radius: 100%;
   width: 20px;
   height: 20px;
   border: none;
   z-index:1;
   color: white;
   position: absolute;
   top:-2px;
   left: 8px;
   box-shadow:-2px 2px 4px 0 rgb(0 0 0 / 20%) ;
   font-size:9px;
   cursor: pointer;
}
.my-task .badge-comment:focus{
   outline: none;
}
.my-task .card{
   border-radius: 5px;
   height: 225px;
   padding: 0;
   cursor: pointer;
   position: relative;
   /* overflow: hidden; */
}
.my-task .card h6{
   margin: 0;
   font-size: 14px;
}
.my-task .card-body, .my-task .card-header {
   padding: 10px 5px 0 5px;
}
.my-task .card-body p{
   text-align: justify;
   font-size:10px;
   overflow-y:auto;
   overflow-x: hidden;
   height: 80px;
   margin: 0;
   padding-left: 5px;
}
.my-task p::-webkit-scrollbar{
   background-color:#f5f7fb;
   width: 7px;
   border-radius: 10px;
}
.my-task p::-webkit-scrollbar-thumb{
   background-color:rgba(36, 105, 92, 0.2);
   border-radius: 10px;
}
.my-task .list li{
   padding-bottom: 8px;
   display: flex;
   align-items: center;
   justify-content:flex-end;
}
.my-task .list li span,.my-task .list li i{
   font-size:10px;
   opacity:0.6;
}
.my-task .list li i{
   margin-right: 2px;
   display: inline-block;
   width: 15px;
   text-align: center;
}
.my-task .card .progress{
   height:9px;
   margin-bottom:3px;
}
.my-task .card .progress-bar{
   background-color: #24695c;
   font-size:8px;
}
.my-task .card-footer{
   padding: 0 5px;
   margin-top: -5px;
}
.my-task:hover .overlay{
   opacity: 2;
   transition: all 0.3s;
}
.my-task .overlay{
   opacity: 0;
   position: absolute;
   bottom:0;
   left: 0;
   right: 0;
   background-color:white;
   padding:5px;
   box-shadow:0 -0.125rem 0.25rem rgb(0 0 0 / 8%);
   transition: all 0.3s;
}
.overlay ul li span{
   font-size: 10px;
}

.overlay ul li i{
   font-size: 8px;
}
.list-inline-item:not(:first-child) {
   margin-right: 0.2rem;
}
.overlay ul.list-inline li .btn{
   width: 28px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid;
}
.button-stop{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
a.btn-task-menu {
    border: 1px solid #24695c;
    background-color: transparent;
 
    border-radius: 3px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
}
    a.btn-task-menu:hover {
        border: 1px solid #24695c;
    }

    .card-header ul.dropdown-menu {
        background-color: white;
        /* min-width:max-content; */
        opacity: 2;
        cursor: pointer;
        box-shadow: 0 0 50px 0 rgba(82, 63, 105, 0.15);
        border: 0;
        /* text-align: right; */
        /* padding: 5px; */
    }

    .card-header ul.dropdown-menu li {
        padding: 0.25rem;
    }

.my-task .menu-sub {
    position: absolute;
    top: 0;
    right: -137px;
    display: none;
    border-radius: 5px;
    text-align: right;
}

.my-task .dropdown-menu > li:hover > .menu-sub {
    display: block;
}

.my-task a.dropdown-item, .my-task a.dropdown-item span {
    /* color:#24695c ; */
    font-weight: bolder;
    font-size: 12px;
    border-radius: 5px;
    padding: 5px;
}
.my-task ul.menu-details li a:hover,.my-task ul.menu-details li a:active,.my-task ul.menu-details li a.active{
   background-color:#e9ecef;
   color:#24695c ;
}
.my-task ul.menu-sub{
   z-index: 1001;
   min-width: max-content;
   left: 100%;
   top: 0;
   display: none;
}

/*    .btn-task-menu:hover span, .btn-task-menu:active span, .btn-task-menu:active span {
        background-color: white;
    }

.btn-task-menu span {
    display: block;
    width: 2px;
    height: 2px;
    margin-top: 1px;
    background-color: #24695c;
}*/
.card-header h6{
   font-weight: bolder;
}
.card-body .profile-symbol .symbol{
   border-radius: 100%;
   width: 35px;
   height: 35px;
   border: 2px solid white;
   transition: 0.5s;
   box-shadow: -2px 2px 4px 0 rgb(0 0 0 / 20%);
}
.card-body .profile-symbol .symbol:hover{
   transform: translateY(-4px) scale(1.02);
}
.card-body span{
   font-size:0.75rem;
}
.my-task .menu-sub:before {
   display: none;
}
.my-task .dropdown-menu:before {
   width: 0;
   height: 0;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
   border-bottom: 7px solid #fff;
   content: "";
   top: -6px;
   position: absolute;
   left: 10px;
   z-index: 2;
}
#my-companies{
   background-color: #ffffff;
   border-radius: 0;
}
input[type="search"]{
   border-radius: 0;
}
/** for table**/
.table td{
   color: #242934;

}
.table thead, tbody, tfoot, tr, td, th{
   border-color: #e6edef;
}
.table  tbody tr{
   transition: all 0.3s;
   vertical-align: middle;
}
.table tbody tr:hover td{
   background-color:rgb(235, 243, 240);
   color: #24695c;
}
.table ul li a{
   margin: 2px;
}
.table-responsive .profile-img{
   width: 50px;
   height: 50px;
   border-radius:100%;
   overflow:hidden;
}
    .table-responsive .profile-img img{
        width:100%!important;
        object-fit:fill;
    }
    .table-responsive .profile-td {
        width: 60px;
    }
.btn-success,.badge-success{
   background-color:#24695c ;
}
.badge-secondary{
   background-color: #ba895d;
   cursor: pointer;
   width: 90px;
}
.btn-outline-secondary{
   color: #ba895d ;
   border-color:#ba895d  ;
}
.btn-outline-secondary:hover{
   color: white;
   background-color:#ba895d;
}
.badge-danger{
   background-color: #d22d3d;
   cursor: pointer;
}
ul.edit{
   margin-bottom: 0;
}
ul.edit li a.btn-outline-primary{
   color:#316cf4;
}
ul.edit li a:hover {
   color:#ffffff;
}


/** end table**/
.pagination .page-link{
   color: #24695c;
}
.pagination{
   direction:ltr;
}
.page-link:focus{
   box-shadow: none;
}
.pagination .active{
   background-color:#24695c;
   color:white;
   border-color:#24695c;
}
#checkbox label{
   font-weight: bolder;
}
.card{
   border-color: #e6edef;
   margin: 0;
   padding: 10px 0;
   box-shadow: 0 0 20px 0 rgb(76 87 125 / 2%)
}
.card-header h5{
   font-weight: bolder;
   font-size: 22px;
}
.card-header,.card-footer{
   background: none;
   padding:15px;
   border-top-color:#e6edef ;
   border-bottom: 0;
}
.card-body{
   padding: 0 15px;
}
.form-control{
   color:#717171 ;
   /* height: 2.5rem; */
   /* line-height: 1.5; */
   border-color: #bdbdbd;
}
.form-label,.col-form-label{
   font-weight: bolder;
   color: #59667a;
}
.form-control:focus,.form-select:focus{
   box-shadow:0 0 0 0.2rem rgb(171 140 228 / 5%);
   border-color:#bdbdbd;
}

.form-check-label {
    font-weight: bolder;
    font-size: 16px;
    color: #59667a;
}
.btn-back,.btn-record{
   color: #ffffff;
   outline: none;
   border: 0;
   font-weight: bolder;
   border-radius: 5px;
}
.btn-record{
   background-color:#24695c  ;
   padding: 8px 15px;
   color: white;
}
.btn-back{
   background: -webkit-linear-gradient( -180deg, #e6c5a8,#ba895d);
   background: -o-linear-gradient( -180deg, #e6c5a8,#ba895d );
   background: -moz-linear-gradient( -180deg, #e6c5a8,#ba895d );
   background: linear-gradient( -180deg,#e6c5a8,#ba895d);
   /* background-color: #ba895d; */
   padding: 8px 25px;
}
.btn:focus{
   box-shadow: none;
   outline: none;
}
ul.nav li{
   width: 100%;
}
ul.nav li a:link,ul.nav li a:visited{
   display: block;
   text-decoration: none;
   height: 40px;
   color: black;
   font-weight: bolder;
   padding: 7px 20px;
}
ul.nav li a:hover{
   background-color:rgba(36, 105, 92, 0.2) ;
   color:#24695c ;
}
.btn-success:hover{
   background:#24695c;
}
.btn-light{
   background-color:#e6edef ;
   color:#24695c ;
   font-weight: bolder;
   height: 43px;
   border: 0;
}
.alert{
   width: 100%;
   background-color: grey;
}
.badge-info{
   background-color:#717171 ;
}
.badge-warning{
   background-color: #e2c636;
}
.btn-style{
   width: 30px;
   height: 25px;
   background: white;
   border-radius: 3px;
   font-weight: bold;
   display: flex;
   align-items: center;
   justify-content: center;
   transition:all 0.5s ;
}
.btn-style i{
   font-size: 12px;
}
.box-btn-top .active{
   color: var(--bs-btn-hover-color);
   background-color: var(--bs-btn-hover-bg);
   border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-orange{
   --bs-btn-color:#FFA500FF;
   --bs-btn-border-color:#FFA500FF;
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #FFA500FF;
   --bs-btn-hover-border-color: #FFA500FF;
   --bs-btn-focus-shadow-rgb: 25, 135, 84;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #FFA500FF;
   --bs-btn-active-border-color: #FFA500FF;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color:#FFA500FF;
   --bs-btn-disabled-bg: transparent;
   --bs-btn-disabled-border-color: #FFA500FF;
   --bs-gradient: none;

}
/* style time-line */
.box-tomorrow{
   position: relative;
   padding-bottom: 30px;
}
.box-tomorrow::before{
   content: "";
   display: block;
   width: 90%;
   height: 1px;
   background-color:#e6edef;
   position: absolute;
   right: 0;
   left: 0;
   top: 10px;
   margin: auto;
}
.box-tomorrow p{
   padding: 5px 30px;
   background-color: #f5f7fb;
   color: #717171;
   text-align: center;
   position: absolute;
   top:-3px;
   right:38%;
   font-size: 14px;
   border-radius: 5px;
}
.timeline {
   position: relative;
}
.timeline::after {
   content: '';
   position: absolute;
   width: 2px;
   background-color:#e6edef;
   top: 0;
   bottom: 0;
}
#timeline input#search{
   box-sizing: border-box;
}
.btn-angelright,.btn-angleleft{
   border:none;
   background-color: transparent;
}
#timeline i.fa-angle-left,#timeline i.fa-angle-right{
   color: #24695c;
   font-size: 15px;
   background-color:#e6edef ;
   width: 30px;
   height: 30px;
   border-radius: 100%;
   padding-top: 8px;
   transition: all 0.3s;
}
.fa-angel-style{
   color: #24695c;
   display:flex;
   align-items: center;
   justify-content: center;
   background-color:#e6edef ;
   width: 30px;
   height: 30px;
   border-radius: 100%;
   
}

#timeline i.fa-angle-left:hover,#timeline i.fa-angle-right:hover,.fa-angel-style:hover{
   background-color:#24695c ;
   color:#e6edef ;
   transition: all 0.3s;
}
.content {
    padding: 10px 20px 10px 10px;
    position: relative;
    background-color: inherit;
}
.content::after {
   content: '';
   position: absolute;
   width:14px;
   height: 14px;
   right:-6px;
   background-color:#f5f7fb;
   border: 2px solid #24695c;
   top: 15px;
   border-radius: 50%;
   z-index: 1;
}
.fa-circle{
   float: left;
   background-color:rgba(36, 105, 92, 0.25);
   overflow: hidden;
   color: #24695c;
   font-size: 4px;
   border-radius: 100%;
   padding: 4px;
   margin-left: -10px;
}
.table-timeline h5{
   font-size:18px;
}
.table-timeline p{
   font-size: 12px;
}
h6,h5{
   font-weight: bolder;
}
.timeline h5{
   font-size: 14px;
}
.timeline h6{
   font-size: 12px;
}

.modal{
   background-color: rgba(10,10,10,.2);
}
span.page-link{
   font-size: 14px;
}
/*style chat*/
.message-out,.message-in{
   width: 100%;
   min-height: 40px;
   margin-bottom: 10px;
}
.smg-out{
   float: right;
   padding: 8px 10px 5px;
   background-color:#d7e1de ;
   border-radius:5px;
   position: relative;
   text-align: justify;
}
.smg-out p,.smg-in p{
   margin-bottom:0;
   font-size: 12px;
}
.smg-out:before{
   content: "";
   display: block;
   position: absolute;
   right: -6px;
   top:0;
   border-radius: 3px;
   border-right: 15px solid transparent ;
   border-left: 15px solid transparent;
   border-top: 15px solid #d7e1de;
   border-bottom: 15px solid transparent;
}
.smg-in{
   float:left;
   padding: 10px;
   background-color:#f0efef ;
   border-radius:5px;
   position: relative;
   text-align: justify;
}
.smg-in:before{
   content: "";
   display: block;
   position: absolute;
   width: 15px;
   height: 15px;
   left: -5px;
   top: 0;
   border-radius: 3px;
   border-right: 15px solid transparent ;
   border-left: 15px solid transparent;
   border-top: 15px solid #f0efef;
   border-bottom: 15px solid transparent;
}
.text-area{
   width:90% ;
   margin-left: 5px;
   position: relative;
}
.text-area svg.sticker{
   position: absolute;
   top:8px;
   right: 8px;
   cursor: pointer;
}
.text-area svg.voice{
   position: absolute;
   top:10px;
   left: 7px;
   cursor: pointer;
}
.text-area textarea{
   width:100%;
   resize: none;
   outline: none;
   padding: 10px 40px;
   height: 40px;
   font-size: 12px;
   overflow-y: hidden;
}
.scroll-view{
   overflow-x: hidden;
   overflow-y: scroll;
}
.scroll-view::-webkit-scrollbar{
   background-color:white;
   width:8px;
}
.scroll-view::-webkit-scrollbar-thumb{
   background-color:rgba(36, 105, 92, 0.2);
   border-radius: 10px;
}
.chat-room .card,.access-user .card{
   height:calc(100vh - 100px);
}
.chat-room button{
   border:1px solid #dee2e6;
   width: 30px;
   height: 30px;
   border-radius: 100%;
   background-color: white;
   color:#BFBFBF;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   transition:all 0.3s;
}
.chat-room button:hover{
   border-color: #24695c;
   background-color: #24695c;
   color: white;
   transition:all 0.3s;
}
ul.chatroom-sidebar li a:link,ul.chatroom-sidebar li a:visited{
   color:  #222222;
   text-decoration: none;
   display: block;
   padding: 10px 0;
}
.chatroom-sidebar .profile{
   border-radius: 100%;
   margin-left:10px;
   width: 40px;
   height: 40px;
   border: 2px solid white;
   transition: 0.5s;
   box-shadow: -2px 2px 4px 0 rgb(0 0 0 / 20%);
}
.chatroom-sidebar .profile img{
   width: 100%;
   height: 100%;
   border-radius: 100%;
}
.chatroom-sidebar span{
   font-weight: bold;
   transition: all 0.5s;
}
.chatroom-sidebar span:hover{
   color: #24695c;
   transition: all 0.5s;
}
.chat-room .card-body .profile:hover{
   transform: translateY(-4px) scale(1.02);
}
.chat-room textarea:focus{
   box-shadow: none;
}

/*style footer*/
.footer-mobile{
   background-color: white;
   height: 50px;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   box-shadow: 0 -.125rem .25rem rgba(0,0,0,.075);
   z-index: 10;
}
ul.navigation-mobile li a:link,ul.navigation-mobile li a:visited{
   text-decoration: none;
   color: #24695c;
   display:flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   margin-top: 22px;
}
ul.navigation-mobile li a:hover {
   text-decoration: none;
   transform:translateY(-20px);
   transition: all 0.3s;
}
ul.navigation-mobile li a i{
   background-color: white;
   width: 35px;
   height: 35px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   border-radius: 100%;
   box-shadow: -2px 2px 4px 0 rgb(0 0 0 / 20%);;
}
ul.navigation-mobile li a.icon-dashboard{
   transform: translateY(-20px);
}

/*style new dashboard*/
.card .card-toolbar .btn-setting:hover,
.card .card-toolbar .btn-setting:active{
   background-color:#D7E1DEFF;
   border: none;
}
.card-toolbar .menu-sub{
   position: absolute;
   width: 150px;
   left: 0;
   z-index: 107;
   display: none;
}
.card-toolbar .menu-sub .nav-link{
   color:black;
   padding: 8px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   transition: all 0.3s;
   border-radius: 5px;
}
.card-toolbar .menu-sub .nav-link:hover{
   background-color: #D7E1DEFF;
   transition: all 0.3s;
}
.card-body .badge-lite-danger{
   color: #f1416c;
   background-color:#fff5f8 ;
   font-size:0.65rem;
}
.card-body .content-box a:hover{
   color: #24695c;
   transition:all 0.3s;
}
.scroll-y{
   overflow-y: scroll;
}
.scroll-y::-webkit-scrollbar{
   width: 8px;
}
.scroll-y::-webkit-scrollbar-thumb{
   background-color:rgba(36, 105, 92, 0.2);
   border-radius: 10px;
}
.h-scroll{
   height: 400px;
}
.social-network{
   width: 40px;
   height: 40px;
   border-radius:100%!important;
   overflow:hidden;
}
.margin-between>div:nth-child(even){
   margin-top:1rem;
   margin-bottom: 1rem;
}
.margin-between>div:last-child{
   margin-bottom:0;
}
.content-box img{
   width: 60px;
   height: 50px;
}
.theme-bg,.theme-bg:hover{
    background-color:#24695c ;
   color: white;
  
}
.profile-img{
   width: 40px;
   height: 40px;
}

.content-box .table tr:hover td{
   background:none;
}

.content-box .table .progress{
   height: 6px;
}
.bg-light{
   background-color:#e4edea!important;

}
.bg-primary{
   background-color: #009ef7!important;
}
.border-primary{
   border-color: #009ef7!important;
}
.bg-success{
   background-color: #50cd89!important;
}
.border-success{
   border-color:#50cd89!important ;
}

/*timeline activities*/
.activities .timeline .timeline-item{
   position: relative;
   display: flex;
}
.activities .timeline .timeline-item .circle{
   background-color: white;
   border-radius: 100%;
   width: 15px;
   height: 15px;
   position: absolute;
   top:3px;
   right:30px;
   z-index: 2;
}
.activities .timeline::after{
   content: '';
   display: block;
   position: absolute;
   width: 3px;
   background-color:#D7E1DEFF;
   top:15px;
   bottom:0;
   right: 36px;
   z-index: 1;
}
.card span.line-badge{
   width: 3px;
   height:40px;
   display: block;
   border-radius: 3px;
}
.badge-light-success {
   color: #50cd89;
   background: #e8fff3;
}
.badge-light-warning {
   color: #ffc700;
   background-color: #fff8dd;
}
.badge-light-info {
   color: #7239ea;
   background-color: #f8f5ff;
}
.badge-light-danger {
   color:#f1416c;
   background-color:#fff5f8;
}
.badge-light-primary {
   color: #009ef7;
   background-color: #f1faff;
}
.content-box>div.row{
   border-bottom: 1px dashed #e4e6ef;
}
.content-box>div.row:last-child{
   border-bottom: none;
}
.profile-symbol{
   margin-right: -15px;
   z-index: 0;
   transition: all 0.3s;
}
.profile-symbol:first-child{
   margin-right: 0;
}
.profile-symbol:hover{
   z-index: 1;
   transition: all 0.3s;
}
.popover {
   animation: fade 0.3s;
   position: absolute;
   margin-top:33px;
   z-index: 1010;
   display: none;
   max-width: 276px;
   padding: 1px;
   text-align: left;
   white-space: normal;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, .2);
   border-radius: 6px;
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
   box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.popover-title {
   padding: 8px 14px;
   margin: 0;
   font-size: 14px;
   font-weight: normal;
   line-height: 18px;
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb;
   border-radius: 5px 5px 0 0;
}
.popover-content {
   padding: 9px 14px;
}
.popover > .arrow,
.popover > .arrow:after {
   position: absolute;
   display: block;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
   overflow:visible;
   margin:0;
   padding:0;
   z-index:auto;
   background-color:transparent;
   -webkit-box-shadow:none;
   box-shadow:none;
   bottom:auto;
   left:auto;
   right:auto;
   top:auto;
   -webkit-transform:none;
   -ms-transform:none;
   transform:none;
}
.popover > .arrow {
   border-width: 11px;
}
.popover > .arrow:after {
   content: "";
   border-width: 10px;
}
.popover.top > .arrow {
   bottom: -11px;
   left: 50%;
   margin-left: -11px;
   border-top-color: #999;
   border-top-color: rgba(0, 0, 0, .25);
   border-bottom-width: 0;
}
.popover.top > .arrow:after {
   bottom: 1px;
   margin-left: -10px;
   content: " ";
   border-top-color: #fff;
   border-bottom-width: 0;
}
.popover.right > .arrow {
   top: 50%;
   left: -11px;
   margin-top: -11px;
   border-right-color: #999;
   border-right-color: rgba(0, 0, 0, .25);
   border-left-width: 0;
}
.popover.right > .arrow:after {
   bottom: -10px;
   left: 1px;
   content: " ";
   border-right-color: #fff;
   border-left-width: 0;
}
.popover.bottom > .arrow {
   top: -11px;
   left: 50%;
   margin-left: -11px;
   border-top-width: 0;
   border-bottom-color: #999;
   border-bottom-color: rgba(0, 0, 0, .25);
}
.popover.bottom > .arrow:after {
   top: 1px;
   margin-left: -10px;
   content: " ";
   border-top-width: 0;
   border-bottom-color: #fff;
}
.popover.left > .arrow {
   top: 50%;
   right: -11px;
   margin-top: -11px;
   border-right-width: 0;
   border-left-color: #999;
   border-left-color: rgba(0, 0, 0, .25);
}
.popover.left > .arrow:after {
   right: 1px;
   bottom: -10px;
   content: " ";
   border-right-width: 0;
   border-left-color: #fff;
}
.star{
   background-image:url("../svg/star-gold.svg");
   fill-opacity:0.3;
   background-size: 150px;
   background-repeat: no-repeat;
   background-position: center;
}
.img-account{
   height: 330px;
}
/*input file*/
.custom-file-input {
   display: inline-block;
   position: relative;
   color:#24695c;
}
.custom-file-input input {
   visibility: hidden;
   width: 100px;
}
.custom-file-input:before {
   content: 'انتخاب فایل';
   display: block;
   background: -webkit-linear-gradient( -180deg, #7ccdbe, #24695c);
   background: -o-linear-gradient( -180deg, #7ccdbe, #24695c);
   background: -moz-linear-gradient( -180deg, #7ccdbe, #24695c);
   background: linear-gradient( -180deg,#7ccdbe,#24695c);
   border-radius: 5px;
   padding: 6px 0;
   outline: none;
   white-space: nowrap;
   cursor: pointer;
   color: white;
   font-weight: bold;
   text-align: center;
   font-size:10pt;
   position: absolute;
   left: 0;
   right: 0;
}
.custom-file-input:active:before {
   background: #24695c;
}
.period-oftime .btn,.deadline .btn,.Done-date .btn {
  min-width:65px;
}

.comment-modal-body{
   display: flex;
   flex-direction: column;
}
#login {
    min-height: 100vh!important;
    background-color: rgba(36, 105, 92, 0.1)!important;
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
}
.w-24px{
    width:24px;
}
.h-24px {
    height: 24px;
}
/*استایل دکمه سوییچ*/
/* From Uiverse.io by WhiteNervosa */
.slider-dashboard {
    background-color: #ffffff2b;
    border-radius: 100px;
    padding: 1px;
    /*margin: 5px;*/
    cursor: pointer;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    align-items: center;
    position: relative;
    display: block;
    width: 45px;
    height: 22px;
    box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, rgba(0, 0, 0, 0.21) 0px 0px 0px 24px inset, #22cc3f 0px 0px 0px 0px inset, rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;
}

    .slider-dashboard::after {
        content: "";
        display: flex;
        top: 2.3px;
        left: 4px;
        width: 16px;
        height: 16px;
        background-color: #e3e3e3;
        border-radius: 200px;
        position: absolute;
        box-shadow: transparent 0px 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 6px 6px;
        transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
        will-change: left, background-color;
    }

.switch-dashboard input[type="checkbox"]:checked + .slider-dashboard {
    box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, #22cc3f 0px 0px 0px 2px inset, #22cc3f 0px 0px 0px 24px inset, rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;
}

    .switch-dashboard input[type="checkbox"]:checked + .slider-dashboard::after {
        left: 26px;
    }

.switch-dashboard input[type="checkbox"] {
    display: none;
}

.card-task.notshow .card-body, .card-task.notshow .card-footer {
    display: none;
}

.card-task.notshow {
    height: auto;
}


}