@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/iransans/fonts/eot/IRANSansWeb(FaNum)_Bold.eot');
    src: url('../fonts/iransans/fonts/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/iransans/fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/iransans/fonts/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/iransans/fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/iransans/fonts/eot/IRANSansWeb(FaNum)_Medium.eot');
    src: url('../fonts/iransans/fonts/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/iransans/fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/iransans/fonts/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/iransans/fonts/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/iransans/fonts/eot/IRANSansWeb(FaNum)_Light.eot');
    src: url('../fonts/iransans/fonts/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/iransans/fonts/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/iransans/fonts/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/iransans/fonts/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/iransans/fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot');
    src: url('../fonts/iransans/fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/iransans/fonts/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/iransans/fonts/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/iransans/fonts/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/iransans/fonts/eot/IRANSansWeb(FaNum).eot');
    src: url('../fonts/iransans/fonts/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/iransans/fonts/woff2/IRANSansWeb(FaNum).woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/iransans/fonts/woff/IRANSansWeb(FaNum).woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/iransans/fonts/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
}

@font-face {
    font-family: IranYekan;
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/iranyekan/eot/iranyekanwebextraboldfanum.eot');
    src:  url('../fonts/iranyekan/woff2/IRANYekanWebFn-extrabold.woff2') format('woff2'),
    url('../fonts/iranyekan/woff/iranyekanwebextraboldfanum.woff') format('woff'),
    url('../fonts/iranyekan/ttf/iranyekanwebextraboldfanum.ttf') format('truetype');
}

@font-face {
    font-family: IranYekan;
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/iranyekan/eot/iranyekanwebboldfanum.eot');
    src:  url('../fonts/iranyekan/woff2/IRANYekanWebFn-Bold.woff2') format('woff2'),
    url('../fonts/iranyekan/woff/iranyekanwebboldfanum.woff') format('woff'),
    url('../fonts/iranyekan/ttf/iranyekanwebboldfanum.ttf') format('truetype');
}

@font-face {
    font-family: IranYekan;
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/iranyekan/eot/iranyekanwebextrablackfanum.eot');
    src:  url('../fonts/iranyekan/woff2/IRANYekanWebFn-extrablack.woff2') format('woff2'),
    url('../fonts/iranyekan/woff/iranyekanwebextrablackfanum.woff') format('woff'),
    url('../fonts/iranyekan/ttf/iranyekanwebextrablackfanum.ttf') format('truetype');
}


@font-face {
    font-family: IranYekan;
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/iranyekan/eot/iranyekanwebblackfanum.eot');
    src:  url('../fonts/iranyekan/woff2/IRANYekanWebFn-black.woff2') format('woff2'),
    url('../fonts/iranyekan/woff/iranyekanwebblackfanum.woff') format('woff'),
    url('../fonts/iranyekan/ttf/iranyekanwebblackfanum.ttf') format('truetype');
}

@font-face {
    font-family: IranYekan;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/iranyekan/eot/iranyekanwebregularfanum.eot');
    src:  url('../fonts/iranyekan/woff2/IRANYekanWebFn.woff2') format('woff2'),
    url('../fonts/iranyekan/woff/iranyekanwebregularfanum.woff') format('woff'),
    url('../fonts/iranyekan/ttf/iranyekanwebregularfanum.ttf') format('truetype');
}

@font-face {
    font-family: IranYekan;
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/iranyekan/eot/iranyekanwebmediumfanum.eot');
    src:  url('../fonts/iranyekan/woff2/IRANYekanWebFn-Medium.woff2') format('woff2'),
    url('../fonts/iranyekan/woff/iranyekanwebmediumfanum.woff') format('woff'),
    url('../fonts/iranyekan/ttf/iranyekanwebmediumfanum.ttf') format('truetype');
}

@font-face {
    font-family: IranYekan;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/iranyekan/eot/iranyekanweblightfanum.eot');
    src:  url('../fonts/iranyekan/woff2/IRANYekanWebFn-light.woff2') format('woff2'),
    url('../fonts/iranyekan/woff/iranyekanweblightfanum.woff') format('woff'),
    url('../fonts/iranyekan/ttf/iranyekanweblightfanum.ttf') format('truetype');
}


@font-face {
    font-family: IranYekan;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/iranyekan/eot/iranyekanwebthinfanum.eot');
    src:  url('../fonts/iranyekan/woff2/IRANYekanWebFn-thin.woff2') format('woff2'),
    url('../fonts/iranyekan/woff/iranyekanwebthinfanum.woff') format('woff'),
    url('../fonts/iranyekan/ttf/iranyekanwebthinfanum.ttf') format('truetype');
}

:root{
    --back-color:#7ebc89;
}
html{
    height:100%;
}

body{
    font-family:iransans !important;
    direction:rtl;
    box-sizing: border-box;
    font-size: 1em;
    background: #f7f0e7;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
}
div#app{
    height: 100%;
}

div#app1{
    overflow-x: hidden;
}

::selection {
    color: #fff;
    background: #7ebc89;
}

a{
    text-decoration: none;
    color: unset;
    /*display: block;*/
}
.top-buttons {
    margin-top: 31px;
}
a.top-button {
    width: 259px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    background: #4bfcaf;
    margin-bottom: 20px;
    border-radius: 49px;
    color: #000000;
    font-weight: bold;
    box-shadow: 0 1px 6px 2px gainsboro;
    transition: all .2s;
}
a.top-button:hover {
    color: #fff;
    transform: scale(1.05);
}
/*-----------------------------------helper----------------------------*/
.text-align-left{
    text-align: left;
}
.text-align-right{
    text-align: right;
}
.text-align-center{
    text-align: center;
}
.text-align-justify{
    text-align: justify;
}
.dir-ltr{
    direction: ltr !important;
}
.dir-rtl{
    direction:rtl !important;
}
.display-flex{
    display:flex;
}
.flex-1-1{
    flex:1 1;
}

.ml-0 {
    margin-left: 0 !important;
}

.ml-1 {
    margin-left: 0.25rem !important;
}

.ml-2 {
    margin-left: 0.5rem !important;
}

.ml-3 {
    margin-left: 1rem !important;
}

.ml-4 {
    margin-left: 1.5rem !important;
}

.text-bold{
    font-weight: bold;
}

.display-none{
    display: none;
}
.hidden{
    display:none !important;
}
.fs-9{
    font-size:.9em;
}
.fs-8{
    font-size:.8em;
}
.fs-1{
    font-size:1em;
}
.fs-1\.2{
    font-size:1.2em;
}
.fs-1\.1{
    font-size:1.1em;
}
.fs-1\.3{
    font-size:1.3em;
}
.fs-1\.4{
    font-size:1.4em;
}
.fs-1\.5{
    font-size:1.5em;
}
.fs-2{
    font-size:2em;
}
.display-inline{
    display: inline;
}
.cursor-pointer{
    cursor: pointer !important;
}
.w-10px{
    width:10px !important;
}
.w-20px{
    width:20px !important;
}
.w-30px{
    width:30px !important;
}
.w-40px{
    width:40px !important;
}
.w-50px{
    width:50px !important;
}
.w-60px{
    width:60px !important;
}
.h-10px{
    height:10px !important;
}
.h-20px{
    height:20px !important;
}
.h-30px{
    height:30px !important;
}
.h-40px{
    height:40px !important;
}
.h-50px{
    height:50px !important;
}
.h-60px{
    height:60px !important;
}
.line-height-20{
    line-height:20px !important;
}
.line-height-30{
    line-height:30px !important;
}
.line-height-40{
    line-height:40px !important;
}
.line-height-50{
    line-height:50px !important;
}
.cursor-pointer{
    cursor:pointer !important;
}
.v-hidden{
    visibility:hidden !important;
}

.w-100 {
    width:100% !important;
}
.h-100{
    height:100% !important;
}

.link-nohover:hover{
    color: unset;
}
.flex-grow{
    flex:1 1 auto !important;
}
@media(max-width:640px){
    .sm\:flex-column{
        flex-direction:column !important;
    }

    .sm\:w-100{
        width:100% !important;
    }

    .sm\:w-70{
        width:70% !important;
    }
}

.line {
    width:100%;
    height: 1px;
    background: #dcdcdc;
}
.transition-all{
    transition: all .3s ease-in-out !important;
}

[v-cloak]{
    display: none !important;
}
/*--------------------------------------------------------------------------*/
.home-header {
    position: relative;
}

img.top-image {
    position: absolute;
    top: 0;
    left: 0;
}


h1.site-title {
    font-size: 1.3em;
    color: #fff;
    line-height: 80px;
    margin-left: 5px;
    font-family: cursive;
    font-weight: bold;
}



.top-header {
    position: relative;
    height: 100%;
}
.top-header::after{
    content: "";
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 99%;
    background: rgb(177 101 6 / 25%);
}
video {
    width: 100%;
    height: 100%;
    max-height: inherit;
    object-fit: fill;
    overflow: hidden;
    background-position: center;
}
.search-box{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    z-index:10;
    display:flex;
    align-items: center;
    justify-content: center;
}

.center-area{
    position: relative;
    text-align: center;
    color: #fff;
    width: 52%;
}
.center-area h2 {
    font-size: 2.7em;
    margin-bottom: 21px;
}
.center-area h4 {
    font-size: 1.5em;
    margin-bottom: 26px;
}

.search-input {
    position: relative;
}

.search-input input {
    width: 100%;
    line-height: 55px;
    border-radius: 69px;
    border: none;
    padding: 0 39px;
}
.search-input input:focus{
    border:none;
    outline: 2px solid green;
}
i.fa-bars {
    color: #fff;
    font-size: 2.1em;
    margin: 22px 20px;
    cursor: pointer;
    flex: 1 1;
}
.search-input i.fa-search {
    position: absolute;
    top: 18px;
    right: 11px;
    color: #767676;
    font-size: 1.3em;
}
.card-home img {
    width: 50px;
    height: 50px;
    margin: 0 auto;
}
section.reasons {
    margin-top: 30px;
}
h4.sec-header {
    font-size: 1.2em;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    background: #17c099;
    padding: 10px;
    border-top: 5px solid #6cff75;
    border-radius: 13px;
    margin: 0 19px 13px;
}

.card-items {
    display: flex;
    padding: 0;
    flex-wrap: wrap;
}
.card-home {
    text-align: center;
    margin: 10px 20px;
    border: none;
    flex: 19%;
    min-height: 187px;
    box-shadow: 0 0 4px 1px #6cff75;
    padding: 11px 14px 0;
    cursor: pointer;
    transition: transform .3s,top 0.5s;
    top: 10px;
    position:relative;
    background: #fff;
    border-radius: 10px;
}

.card-home:hover {
    box-shadow: 0 0 4px 1px #e98d1b;
    transform: scale(1.05);
}
.card-home h5 {
    font-size: .9em;
    margin-top: 11px;
    font-weight: bold;
}

.card-home p {
    font-size: .85em;
    color: #0009;
    /* justify-content: center; */
}
.card-home a {
    font-size: .8em;
    text-align: right;
    padding-right: 10px;
}



.skills-inner {
    display: flex;
    height: 100%;
}

.skills-right {
    flex: 20%;
}
.skills-left {
    padding: 50px 107px;
    background: #1a2c3c;
    color: #fff;
    flex: 80%;
}

.skills-left .title {
    color: #e12454;
    font-weight: 500;
    margin-bottom: 7px;
}

.skills-left .title-big {
    font-weight: bold;
    margin-bottom: 17px;
    font-size: 1.1em;
}

.skills-left select.list {
    width: 100%;
    height: 54px;
    border-radius: 31px;
    padding-right: 18px;

}

section.skills {
    position: relative;
    height: 536px;
    margin-top: 12px;
}


.aboutme img {
    width: 100%;
    height: 216px;
    border-radius: 50%;
}
.aboutme .about {
    background: var(--back-color);
    color: #fff;
    padding: 14px 25px;
    width: 100%;
    border-radius: 10px;
    position: relative;
    top: -15px;
    right: -3px;
    text-align: justify;
}
section.services {
    margin-top: 20px;
}

.services .main-header {
    text-align: center;
    color: red;
    font-weight: bold;
    font-size: 1.2em;
}
.services .sub-header {
    text-align: center;
    font-size: 1.3em;
    font-weight: 500;
    color: #787878;
}

.services .tabs {
    display: flex;
    align-items: center;
    text-align: center;
    padding: 0 55px;
}

.services .tabs .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 100%;
    padding-top:10px;
}

.services .tabs .tab .title {
    color: #919191;
    font-weight: 500;
    margin-bottom: 25px;
    margin-top: 6px;
}

.services .content {
    display: flex;
    width: 100%;
    margin-top: 25px;
}
.services .content .content-text {
    flex: 1 1;
    margin-right: 75px;
}


.services .tabs .tab.active {
    background: #17c099;
}

.services .tabs .tab.active .title {
    color: #fff;
}
.services .tabs .tab img {
    margin-top: 7px;
}
section.intro {
    margin-top: 70px;
    position:relative;
    height: 213px;
}

.intro .right-box {
    position: absolute;
    clip-path: polygon(34% 0, 100% 0, 100% 100%, 0% 100%);
    background: var(--back-color);
    color: #fff;
    padding: 67px 109px 67px 93px;
    height: 215px;
    width: 74%;
}

.intro img {
    height: 213px;
    width: 54%;
    float: left;
}
.resume {
    text-align: center;
    width: 250px;
    margin: 0 auto;
}

.resume .about {
    background: var(--back-color);
    color: #fff;
    border-radius: 5px;
}
.resume img {
    width: 221px;
    height: 221px;
    border-radius: 50%;
}

.markets {
    width: 100%;
    background: #fff;
    height: 180px;
}
img.market {
    width: 200px;
    cursor: pointer;
}

section.posts {
    margin-top: 32px;
    padding: 0 67px;
}

section.posts .top {
    display: flex;
}

.posts .right-header {
    flex: 86%;
    padding-left: 20px;
}

.posts .right-header .main-header {
    color: #e12454;
    font-weight: bold;
    font-size: .9em;
}
.posts .sub-header {
    font-weight: 500;
}
.posts .left-header {
    color: #818181;
    font-size: .9em;
}

.posts .post-boxes {
    margin-top: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.posts .post-boxes .post-box {
    padding: 10px 10px;
    cursor: pointer;
    flex: 30%;
}

.posts .post-boxes .post-box img {
    width: 100%;
    height: 199px;
}


.posts .post-boxes .post-box .post-date {
    margin-top: 13px;
    margin-bottom: 9px;
    font-size: .7em;
    background: #e12454;
    color: #fff;
    display: inline-block;
    padding: 2px 4px;
    border-radius: 4px;
}

.posts .post-boxes .post-box .post-title {
    font-weight: bold;
    font-size: .9em;
    color: #000000d1;
}

.posts .post-boxes .post-box .post-more {
    font-size: .8em;
    margin-top: 9px;
}
/*----------------------------------Posts-----------------------------*/
.content .ql-container {
    min-height: 250px;
}
header.posts-header {
    background: #24c7a9;
    color: #fff;
    line-height: 70px;
}
h1.posts-title {
    font-size: 1.5em;
    margin-top: 20px;
}
.posts-header i {
    font-size: 1.2em;
    cursor: pointer;
}
span.post-search {
    margin-left: 10px;
}
span.user-prof-button {
    margin-left: 21px;
    margin-right: 11px;
}
.path {
    margin-top: 17px;
    font-weight: 500;
    color: #5c5a5a;
    font-size: .9em;
    display: flex;
    align-items: center;
}
.path i.seprator {
    vertical-align: middle;
    font-size:.8em;
    margin: 0 7px;
}
.path a i {
    margin-left: 5px;
}
.posts-content>:nth-child(3) {
    margin-top: 13px;
}
.posts-content>.row {
    margin-top: 20px;
}
.sidebar-content {
    background: #fff;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    box-shadow: -2px 2px 13px 2px #c5c3c3;
}
h2.sidebar-header {
    font-size: 1.1em;
    background: #09bb9d;
    padding: 5px 8px;
    color:#fff;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    line-height: 26px;
}

.sidebar-content ul {
    list-style: none;
    padding: 0;
}

.cat-item a span i {
    margin-left: 5px;
}

.cat-item a {
    display: flex;
    align-items: center;
}

.cat-item a span {
    flex: 1;
    margin-left: 9px;
}
i.cat-count {
    padding: 4px 5px;
    font-size: .9em;
    color: #8b8686;
}
li.cat-item {
    line-height: 47px;
}
.post {
    display: flex;
    flex-direction: column;
    margin-bottom: 35px;
    transition: all 0.3s;
    cursor: pointer;
    box-sizing: border-box;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 0 8px 2px #b5b5b4;
}

.post-image {
    width: 200px;
    height: 175px;
}

.post-image img {
    width: 100%;
    height: 100%;
}

.post-text {
    flex: 1 1;
    display: flex;
    flex-direction: column;
}

h2.post-title {
    font-size: 1.1em;
    font-weight: 700;
    color: #585858;
}

.post-content {
    min-height: 90px;
    font-size: .9em;
    color: #6e6d6d;
    text-align: justify;
}

.post-info {
    display: flex;
    justify-content: space-around;
    background: #006250;
    line-height: 34px;
    transition: all 0.5s;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    color: #fff;
    font-weight: 500;
    font-size: .85em;
}


.post-info i {
    margin-left: 3px;
}
.sidebar-content ul {
    padding: 0 5px;
}

div#last-articles a:hover {
    color: #271bdd;
}
div#last-articles a i {
    font-size: .7em;
    margin-left: 7px;
}
ul.pagination {
    justify-content: center;
}
ul.pagination i {
    font-size: .75em;
}
.toolbar {
    text-align: left;
}
i.fa-book-blank {
    font-size: .9em !important;
    margin-left: 8px;
    color: #007eff;
}

p.no-result {
    font-size: .9em;
    background: #f9ffc7;
    line-height: 30px;
    padding-right: 6px;
    border: 1px solid #ff6a23;
    opacity: .9;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 1px 6px 3px #dfbfc2;
}

.no-display{
    display: none !important;
}

.hide{
    display: none;
}
.filter-area {
    font-size: .9em;
    margin-top: 14px;
    margin-right: 20px;
}
.filter-area a {
    margin-right: 29px;
    padding: 3px 10px;
    background: #4f55cd;
    color: #fff;
    border-radius: 5px;
}

.no-cursor {
    cursor: unset;
}
.post-image-wide {
    width: 100%;
    height:300px;
}
.post-image-wide img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.post-title-single{
    font-size: 1.5em;
    font-weight: 700;
    color: #585858;
}
.post-info.single {
    background: unset !important;
    font-size: .9em;
    margin-top: 10px;
    margin-bottom: 20px;
}

.no-hover{
    pointer-events: none;
}
.tags a {
    display: inline !important;
    color: #2518eb;
}
.tags {
    font-size: .95em;
    border-radius: 5px;
}
.tags h6 {
    color: #523939;
}

.no-link:hover{
    color:unset;
}
/*---------------------------------panel-------------------------*/
small {
    color: #999;
}
label.disabled {
    color: #8f8f8f;
}
h2.header {
    font-size: 1.2em;
    color: #747474;
    margin-top: 12px;
}
h2.header:nth-of-type(2) {
    margin-top: 41px;
}
th,tr {
    font-size: .9em;
}
/*----------------------------------Auth----------------------------*/
/*--------------------------------------Pre-Registration----------------------------*/

a.reg-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid green;
    padding: 14px;
    background: #fff;
    box-shadow: 0 0 4px 1px green;
    border-radius: 15px;
    min-width: 218px;
    transition: all .3s;
    margin: 0 42px 20px;
}
a.reg-card:hover{
    transform:scale(1.1);
}
.card-wrapper {
    margin: 16%;
}
/*----------------------------------------general class----------------------------------*/
a:hover{
    text-decoration:none;
}

@media (max-width: 640px) {
    .sm\:w-100{
        width: 100% !important;
    }
}
img.table-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.w-32{
 width: 32% !important;
}
/*-------------------------date picker------------------------*/
span.vpd-main.form-control.date {
    padding: 0;
}
label.vpd-icon-btn {
    margin: 0;
}

/*-------------------------------------------------*/
.tools h4 {
    margin-top: 14px;
    font-size: 1.1em;
}
.tools form {
    border: 1px solid #099d31;
    padding: 10px 9px;
    margin-top: 7px;
    font-size: .9em;
    background: #fff;
}
.reload-button {
    height: 19px;
}
.rotate{
    transition: transform 1s;
    transform: rotate(360deg);
}
.check {
    width: 16px;
    height: 16px;
    accent-color: #c36a57;;
}

.snackbar{
    width:400px;
    line-height:60px;
    background:#000;
    color: #fff;
    position: fixed;
    z-index:2000;
    left:40%;
    top:10px;
    animation: snackbar-appear .3s ease-in-out;
    padding: 0 15px;
}

@keyframes snackbar-appear {
    0%{
        opacity: 0;
    }
    100%{
        opacity:1;
    }
}
@keyframes snackbar-hide{
    0%{
        opacity: 1;
    }
    100%{
        opacity:0;
    }
}

.appear{
   animation: appear .3s ease-in-out;
}

@keyframes appear {
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

section{
    margin-bottom: 120px;
}

.line-through{
    text-decoration: line-through;
}

.loading-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width:100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.19);
}

.loading-text{
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 1px 2px #55eab1;
    color: #10d187;
}
.alert-area{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: rgb(0 0 0 / 39%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-wrapper{
    width: 400px;
    min-height: 150px;
    background: #fff;
    border-radius: 10px;
    animation: move-alert .3s ease-in-out;
    border: 2px solid #123b2d;
}

.text-bold{
    font-weight: bold;
}

@keyframes move-alert {
    0%{
        opacity: 0;
        transform: translateY(-50px);
    }

    100%{
        opacity: 1;
        transform: translateY(0);
    }
}


.snackbar{
    position: fixed;
    top: 10px;
    right: 40%;
    z-index: 100000;
    width: 250px;
    min-height: 60px;
    animation: move-snackbar .5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

}
.snackbar p {
    color: #fff;
    margin: 0;
}

.snackbar-success{
    background: #126a46;
    border: 1px solid #14ff14;
}

.snackbar-danger{
    background: #6a121f;
    border: 1px solid #ff1414;
}

@keyframes  move-snackbar{
    0%{
        top: -100px;
    }

    100%{
        top: 10px;
    }
}

li.page-item.active a,li.page-item.active button {
    background: #6c841c;
    color: #fff;
}

.page-item:last-child .page-link {
    border-radius: 0.25rem 0 0 0.25rem !important;
}

.stat-badge{
    background: #266f43;
    color: #fff;
    display: inline-block;
    align-items: center;
    justify-content: center;
    padding: 1px 0;
    /* padding-top: 2px; */
    border-radius: 5px;
    width: 29px;
    text-align: center;
    margin-bottom: 1px;
    position: absolute;
    top: 12px;
    left: 17px;
    font-size: 10px;
    z-index: 100;
}
.stat-badge.sub{
    top: 12px;
    left: 5px;
    background: #024b44;
    font-size: 10px;
    width: 24px;
}