/* hebrew */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1EiS2sd0mm_00.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1EiS2sdUmm.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hebrew */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1ECSysd0mm_00.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1ECSysdUmm.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hebrew */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1E1yysd0mm_00.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1E1yysdUmm.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hebrew */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1EiSysd0mm_00.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1EiSysdUmm.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hebrew */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1Euyysd0mm_00.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1EuyysdUmm.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hebrew */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1EVyusd0mm_00.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1EVyusdUmm.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hebrew */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1Ebiusd0mm_00.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1EbiusdUmm.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hebrew */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1ECSusd0mm_00.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1ECSusdUmm.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hebrew */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1EICusd0mm_00.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/heebo/v10/NGSpv5_NC0k9P_v6ZUCbLRAHxK1EICusdUmm.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
    --bg-color: #f8f8f8;
    --bg-input: white;
    --placeholder: #373a3c;
    --modal-backdrop: black;
    --h1-color: #515455;
    --h2-color: #eee;
    --h3-color: #515455;
    --h4-color: #515455;
    --h5-color: #515455;
    --card-color: white;
    --sidebar-color: white;
    --dropdown-menu:white;
    --dropdown-item:#f8f8f8;
    --sidebar-a-color:#f0f0f0;
    --sidebar-a-hover-color:#f0f0f0;
    --bg-about-color: white;
    --navbar-color: #fff;
    --navbar-brand: #2a38ab;
    --mobile-nav: #161e5c ;
    --card-title: #2a38ab ;
    --card-title-hover: #ff8793 ;
    --nav-link-color: #666;
    --nav-link-hover-color: #e7466e;
    --pills-tab-active:#FF4D79;
    --logo-structure-span: #bcbcbc;
    --logo-structure: #2d3179;
    --bg-SideNav: white;
    --mCSB_dragger_bar: rgba(0,0,0,.2);
    --list-group-item-border: rgba(0,0,0,.080);
    --footer-a-color: #515455;
    --footer-a-hover-color:#ff8793;
    --online-chat: #bcbcbc;
    --secondary-color: rgb(113, 128, 150);
    --primary-color: #636568;
}

[data-theme="dark"] {
    --bg-color: #18191a;
    --bg-input: #18191a;
    --placeholder: #999999;
    --modal-backdrop: white;
    --h1-color: #cfcfcf;
    --h2-color: #eee;
    --h3-color: #b2b2b2;
    --h4-color: #cfcfcf;
    --h5-color: #cfcfcf;
    --card-color: #242526;
    --sidebar-color: #1d1e1f;
    --dropdown-menu:#2d2e30;
    --dropdown-item:#1d1e1f;
    --sidebar-a-color:#161718;
    --sidebar-a-hover-color:#080909;
    --bg-about-color: #0e133a;
    --navbar-color: #242526;
    --navbar-brand: #d7ebff;
    --mobile-nav: white;
    --card-title: #d7ebff ;
    --card-title-hover: #ff8793 ;
    --nav-link-color: #b2b2b2;
    --nav-link-hover-color: #ff8793;
    --pills-tab-active:#FF4D79;
    --logo-structure-span: #8999b0;
    --logo-structure: #d7ebff;
    --bg-SideNav: #242526;
    --mCSB_dragger_bar: #484b4d;
    --list-group-item-border: #37383a;
    --footer-a-color: #999999;
    --footer-a-hover-color:#ff8793;
    --online-chat: #555555;
    --secondary-color: #8999b0;
    --primary-color: #999999;
}
.switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 30px;
}
.btn-collapse {
    width: 40px!important;
    height: 40px;
    background: var(--bg-color);
}
.btn-collapse .nav-link{
    padding: 0!important;
}
body {
    font-family: 'Heebo' ,sans-serif;
    background: var(--bg-color);
    padding-right: 0 !important;
    color: #666;
}
/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #212529;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #000000;
}

input:focus + .slider {
    box-shadow: 0 0 1px #212529;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 30px;
}

.slider.round:before {
    border-radius: 50%;
}
#SideNav .list-group-item {
    /*border: 1px solid var(0,0,0,.080);*/
    border: 1px solid var(--list-group-item-border);
    background-color: var(--bg-color);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}
#SideNav .fa-moon {
    padding: 7px 0 0 7px;
    float: left;
    color: #e4d38d;
}
#SideNav .fa-sun {
    padding: 7px 7px 0 0;
    float: right;
    color: #e4d38d;
}
#sidebarCollapse {
    cursor: pointer;
    margin-right: 20px;
}
#sidebarCollapse:hover {
    color: var(--nav-link-hover-color);
}
.sweet-alert {
    font-family: 'Poppins', sans-serif !important;
    border-radius: 15px !important;
    letter-spacing: -0.3px;
}
.sweet-alert button.cancel {
    background-color: #0b5eb1!important;
}

p {
    font-size: 0.95em;
    font-weight: 400;
    line-height: 1.7em;
    margin-bottom: 0.5rem!important;
    color: var(--nav-link-color) !important;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}
a {
    color: var(--nav-link-color);
    transition: 0.5s;
}
a:hover {
    color: var(--nav-link-hover-color);
    transition: 0.5s;
}
.direction {
    direction: rtl !important;
}

.directionLTR {
    direction: ltr !important;
}
.logo {
    float: left;
    height: 25px;
    margin-right: 5px;
}
#Sign .logo {
    /*float: left;*/
    height: 70px;
    margin: 50px 0 10px 0;
}
.logo2 {
    height: 28px;
}

.navbar {
    padding: 10px 0;
    background: var(--navbar-color);
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}
h1 {
    font-size: 20px !important;
    font-weight: 700 !important;
    padding-top: 5px;
    color: var(--h1-color);
    transition: 0.5s;
}
#Sign h1 {
    font-size: 30px !important;
    font-weight: 900 !important;
}
h2 {
    font-size: 17px !important;
    font-weight: 400 !important;
    padding-top: 5px;
    color: var(--nav-link-color) !important;
}
#Documentation h1 {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    padding-top: 5px;
    color: var(--h1-color);
    transition: 0.5s;
}
#Documentation h2 {
    font-size: 1.7rem !important;
    font-weight: 600 !important;
    color: var(--h4-color) !important;
    margin-bottom: 0;
}
h3 {
    padding-top: 5px;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: var(--h3-color) !important;
    line-height: 1.7rem;
}
h4 {
    font-weight: 600 !important;
    color: var(--h4-color) !important;
    margin-bottom: 0;
}

h5 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 30px;
    /*padding-top: 10px;*/
    color: var(--h5-color) !important;
}
h6{
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 30px;
    /*padding-top: 10px;*/
    color: var(--h5-color) !important;
    margin: -10px auto;
}
i,
span {
    display: inline-block;
}
.mainLogo {
    height: 25px;
}
#username p {
    font-size: 0.7rem!important;
    margin-top: 5px!important;
}
.col-form-label {
    font-size: 0.9rem!important;
}
.input-field {
    height: 38px;
    margin-right: 10px;
    display: inline-block;
    position: relative;
    margin-left: 130px;
}
.search-icon {
    display: inline-block;
    float: left;
    position: relative;
    top:-31px;
    left: 10px;
    opacity: .5;
}
.input-field input{
    padding-left: 32px;
    border-radius: 50px !important;
}
.input-field input:focus{
    border-radius: 50px !important;
    /*border-color: #97a3b7!important;*/
}
.highlight {
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    background-color: var(--sidebar-a-hover-color);
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border-radius: 10px;
}
/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.sticky-top {
    top: 90px!important;
    z-index: 0!important;
}
.cursor {
    cursor: default!important;
}
.error_404{
    margin-top: 100px;
    font-size: 6rem;
    font-weight: 900;
}
.wrapper {
    display: flex;
    align-items: stretch;
}
.navbar {
    /*z-index: -2!important;*/
}
.btn-plus {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 100!important;
    /*padding: 0!important;*/
}
.btn-plus .btn-register {
    height: 50px!important;
    width: 50px!important;
    line-height: 3.6rem!important;
    padding: 0!important;
}
.btn-plus .fa-plus {
    font-size: 1.5rem;
    font-weight: 700;
}
.dropdown-menu {
    background-color: var(--dropdown-menu) !important;
    border-radius: 10px;
}
#Guide {
    height: 80vh;
    overflow-y: hidden;
    overflow-x: hidden;
}
ol li{
    list-style-type: none;
}
#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background: var(--sidebar-color);
    color: var(--nav-link-color);
    transition: all 0.3s;
    margin-top: 55px;
    font-size: 1rem !important;
    font-weight: 400;
    z-index: 100;
}
.mCSB_container{
    right: 0px;
}
#sidebar h2 {
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 25px !important;
}
.login {
    position: fixed;
    height: 100vh;
}
.bg-login {
    height: 100vh;
    position: fixed;
    right: 0;
    background: radial-gradient(circle at top left, #ff8793 0%, #ca3865 100%);
}
.login h4 {
    font-size: 3rem;
    font-weight: 900!important;
    margin: 50px 0 50px 0;
}
.login .login-form {
    margin: 0 50px;
}
.login .col-form-label {
    font-size: 1.4rem!important;
}
.bg-login img {
    height: 50%;
    margin: 15vh auto 0;
}
@media (max-width: 990px) {
    .login .login-form {
        margin: 0!important;
    }
    .bg-login img {
        margin: 30vh auto 0;
    }
}
@media (max-width: 768px) {
    .bg-login {
        display: none;
    }
}
.shadow {
    -webkit-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    -moz-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    /*box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05),inset 0 -1px 0 rgba(0,0,0,0.15);*/
    /*box-shadow: 0 4px 5px 0 rgba(0,0,0,0.06), 0 4px 10px 0 rgba(0,0,0,0.06) !important;*/
}
/*.dropdown-item.active, .dropdown-item:active {*/
/*    color: #fff;*/
/*    text-decoration: none;*/
/*    background-color: #FF4D79;*/
/*    background-image: linear-gradient(65deg,#FF4D79 0,#FF809F 100%);*/
/*}*/
/*.dropdown-menu-right .dropdown-item:active i,*/
/*span {*/
/*    color: white;*/
/*}*/
.dropdown-menu {
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.06), 0 4px 10px 0 rgba(0,0,0,0.06) !important;
    /*box-shadow: 0 4px 10px 0 rgba(103, 151, 255, .1), 0 12px 20px 0 rgba(103, 151, 255, .1) !important;*/
}
.sticky-top::after {
    margin-top: 50px;
}
#sidebar.active {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    height: 100vh;
}
#sidebar.active .sidebar-link {
    display: none;
}

/*#sidebar [data-toggle="tooltip"] {*/
/*    display: none;*/
/*}*/
.sidebar-link {
    margin-left: 10px;
}
#sidebar.active [data-toggle="tooltip"] {
    display: block;
}

.tabList [data-toggle="tooltip"] {
    display: none !important;
}
.tooltip:hover span {
    /* show tooltip */
    display: block;
    /* position relative to container div.tooltip */
    position: absolute;
    bottom: 1em;
    /* prettify */
    padding: 0.5em;
    color: #000000;
    background: #ebf4fb;
    border: 0.1em solid #b7ddf2;
    /* round the corners */
    border-radius: 0.5em;
    /* prevent too wide tooltip */
    max-width: 10em;
}
.tooltip-inner {
    background-color: black;
    color: white !important;
    border-radius: 10px !important;
    height: 35px !important;
    line-height: 25px;
    font-family: 'Heebo', sans-serif!important;
    font-weight: 400;
}
.tooltip.bs-tooltip-top .arrow::before{border:none!important;}
.tooltip.bs-tooltip-left .arrow::before{border:none!important;}
.tooltip.bs-tooltip-right .arrow::before{border:none!important;}
.tooltip.bs-tooltip-bottom .arrow::before{border:none!important;}

#sidebar.active .sidebar-header h1,
#sidebar.active .CTAs {
    display: none;
}

#sidebar.active .sidebar-header strong {
    display: block;
    padding-top: 10px;
}
#sidebar #chat li a{
    min-height: 60px;
}

#sidebar ul li a {
    text-align: left;
}
#sidebar.active ul li a {
    padding: 20px 10px;
    text-align: center;
    font-size: 0.85em;
}

#sidebar.active ul li a i {
    display: block;
    font-size: 1.8em;
    margin: 0;
}
#sidebar.active #chat li a {
    padding: 10px 10px!important;
    text-align: center;
    font-size: 0.85em;
}
#sidebar.active ul ul a {
    padding: 20px !important;
}
#sidebar ul ul a i{
    font-size: 1em !important;
}
#sidebar .profile {
    /*padding: 20px 0 20px 0;*/
    margin: 40px 0 10px 0;
    padding: 0 0 20px 0;
}

#sidebar.active h2 {
    /*font-weight: 300 !important;*/
    /*font-size: 14px !important;*/
    /*padding: 5px;*/
    display: none;
}
#sidebar.active #sidebar-avatar {
    height: 50px !important;
    width: 50px !important;
}
#sidebar-avatar{
    border-radius: 100%;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    /*top: -80px;*/
    /*margin-bottom: -80px;*/
    /*cursor: pointer;*/
    background: #f4f4f4;
    /*display: table;*/
    background-size: cover;
    background-position: center center;
    box-shadow: 0 5px 8px rgba(black, 0.35);
}
/*#sidebar .avatar {*/
/*    margin: 0 auto;*/
/*    height: 100px !important;*/
/*    width: 100px !important;*/
/*    background-size: cover;*/
/*    background-position: center center;*/
/*    !*border: 5px solid #ea4175;*!*/
/*    !*padding: 5px;*!*/
/*}*/
.chat-avatar img {
    float: left;
    height: 40px !important;
    width: 40px !important;
    background-color: #ff8793;
    /*margin-top: -5px;*/
    /*padding: 5px;*/
}
#sidebar.active .username {
    display: none;
}

#sidebar.active .avatar {
    height: 50px !important;
    width: 50px !important;
    /*border: 2px solid #ea4175;*/
}

#sidebar.active .dropdown-toggle::after {
    top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}

#sidebar .sidebar-header {
    height: 110px;
    padding: 20px;
    background: #0BB7AF;
}

#sidebar .sidebar-header strong {
    display: none;
    font-size: 1.8em;
}

#sidebar ul.components {
    padding: 20px 0 50px 0;
}

#sidebar ul li a {
    /*color: #999999;*/
    padding: 10px;
    font-size: 1rem;
    display: block;
    margin: 0 10px 5px 10px;
    border-radius: 10px;
    line-height: 20px;
    transition: 0.5s;
}

#sidebar ul li a:hover {
    color: var(--nav-link-hover-color);
    background: var(--sidebar-a-color);
}
#sidebar ul li a i {
    margin-left: 10px;
    min-width: 20px;
    text-align: center;
}

#sidebar ul li.active > a,
a[aria-expanded="true"] {
    color: rgba(255,255,255,.80);!important;
    background-color: #FF4D79;
    background-image: linear-gradient(65deg,#bf005d 0,#f55267 100%);
}
#sidebar ul li.active > a:hover,
a[aria-expanded="true"] {
    color: rgba(255,255,255,1);!important;
    background-color: #FF4D79;
    background-image: linear-gradient(65deg,#bf005d 0,#f55267 100%);
}
a[data-toggle="collapse"] {
    position: relative;
}
#sidebar .btn {
    line-height: 25px!important;
}
#sidebar h3 {
    color: var(--nav-link-color);
    font-size: 1.5rem!important;
    font-weight: 600!important;
    margin-right: 20px;
}
#sidebar.active h3 {
    text-align: center;
    font-size: 0.9rem!important;
    margin-right: 0px;
}
#sidebar span.nav-tag {
    display: inline-block;
    float: right;
    font-weight: 600;
    height: 20px;
    min-width: 20px;
    line-height: 10px!important;
    text-align: center;
    color: #fff;
    font-size: 11px;
    background-color: #CA3865;
    border-radius: 20px;
    position: relative;
    margin: 0!important;
    top: 10px;
    right: 0;
    padding: 5px;
}
#sidebar .online {
    color: var(--online-chat);
    font-size: 0.8rem;
    margin-left: 10px;
}
#sidebar.active .online {
    display: none;
}
#sidebar.active span.nav-tag {
    top: -20px;
    right: -10px;
    opacity: 0.9;
}
.dropdown .dropdown-menu {
    border: 0 solid rgba(36, 38, 43, .15);
    border-radius: .2rem;
    box-shadow: 0 1rem 3rem rgba(13, 20, 49, .175);
}
#sidebar .nav-link::after {
    top: 10px;
    right: 15px;
    position: absolute;
    transform: scale(1) rotate(0deg);
    transition: all 500ms;
    font-family:"Font Awesome 5 Pro";
    font-weight:900;
    content: "\f078";
}

#sidebar .nav-link[aria-expanded="true"]::after {
    font-family: "Font Awesome 5 Pro";
    content: "\f078";
    transform: scale(1) rotate(180deg);
    transition: all 500ms;
}
#sidebar .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    transition: all 500ms;
}
#sidebar.active .nav-link::after {
    top: auto;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}
#sidebar.active .nav-link[aria-expanded="true"]::after {
    top: auto;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%) scale(1) rotate(180deg);
}

#sidebar .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
    transition: all 500ms;
    margin-right: -4px;
}
.dropdown:hover > .dropdown-menu {
    display: block;
}

ul ul a {
    font-size: 0.9em !important;
    padding-right: 20px !important;
    background: var(--sidebar-a-color);
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #0BB7AF;
}

a.article,
a.article:hover {
    background: #0BB7AF !important;
    color: #fff !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
.navbar-nav {
    padding-right: 0 !important;
}
.navbar-light .navbar-nav .nav-item {
    margin-right: 5px;
}
.navbar-light .navbar-nav .nav-link {
    color: var(--nav-link-color) !important;
    /*background-color: var(--sidebar-a-color) !important;*/
    height: 40px;
    min-width: 40px;
    border-radius: 50px;
    text-align: center;
    /*margin-right: 5px;*/
    transition: 0.5s;!important;
}
.sweet-alert button.cancel {
    color: white !important;
    border-color: #a0a0a0 !important;
    background: #a0a0a0!important;
    border-radius: 50px;
}
.sweet-alert button.confirm {
    color: rgba(255,255,255,1);!important;
    background-color: #FF4D79;
    background-image: linear-gradient(65deg,#bf005d 0,#f55267 100%);
    border-radius: 50px;
}
.navbar-nav .nav-item.show .nav-link {
    color: white !important;
    border-radius: 50px;
    background-color: var(--sidebar-a-hover-color) !important;
}
.navbar-nav .nav-item.show {
    /*color: var(--nav-link-color) !important;*/
    border-radius: 50px;
    background-color: var(--sidebar-a-hover-color) !important;
}
.navbar-nav .nav-link:hover {
    color: var(--nav-link-hover-color) !important;
    background-color: var(--sidebar-a-hover-color) !important;
    transition: 0.5s;!important;
}
.navbar-nav ul li a {
    color: #fff;
    background: #000000;
}
.navbar-nav .btn-sm {
    padding: .1rem .5rem !important;
}
.nav .nav-item {
    margin-right: 5px;
}
.nav .nav-link {
    /*color: var(--nav-link-color) !important;*/
    /*background-color: var(--sidebar-a-color) !important;*/
    height: 40px;
    min-width: 40px;
    border-radius: 50px;
    text-align: center;
    margin-right: 0;
    transition: 0.5s;!important;
    padding: .5rem 0!important;
}
#Documentation .nav .nav-link {
    text-align: left;
    height: auto!important;
    padding: .5rem 1rem!important;
    /*margin-bottom: 5px;*/
}
.nav .nav-link.active {
    color: var(--nav-link-hover-color) !important;
    background-color: var(--sidebar-a-color) !important;
}
.nav .nav-link:hover {
    /*color: var(--nav-link-hover-color) !important;*/
    background-color: var(--sidebar-a-hover-color) !important;
    transition: 0.5s;!important;
}
.nav .nav-item.show .nav-link i {
    color: #FFFFFF !important;
    border-radius: 40px;
    /*background-color: var(--sidebar-a-hover-color) !important;*/
}
.nav-item.show {
    /*color: var(--nav-link-color) !important;*/
    border-radius: 40px;
    background-color: var(--sidebar-a-hover-color) !important;
}
.form-group {
    margin-bottom: 0.5rem!important;
}
/*.nav .nav-link:focus {*/
/*    background: none;*/
/*}*/
/*#sidebar ul li.active > a:hover, a[aria-expanded="true"] {*/
/*    color: rgba(255,255,255,1);*/
/*!important: ;*/
/*    background-image: none;*/
/*}*/
.dropdown-items {
    display: block;
    width: 100%;
    padding: .25rem .5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: inherit;
}
.text-register {
    color: var(--nav-link-hover-color) !important;
}
.text-register a{
    color: var(--nav-link-hover-color) !important;
}
.text-register a:hover {
    color: var(--card-title-hover) !important;
}
.dashboard .btn-register {
    min-width: 200px;
    margin-top: -35px;
    margin-bottom: 10px;
}
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #004847;
    text-shadow: none;
    opacity: .6;
}
.close:hover {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #004847;
    text-shadow: none;
    opacity: .9;
}
.chat-head {
    background-color: var(--sidebar-color);
    width: 100%;
    position: fixed;
    margin-top: 30px;
    z-index: 1;
}
.chat-footer {
    background-color: var(--sidebar-color);
    width: calc(100% - 250px);
    position: fixed;
    bottom: 45px;
}
#content.active .chat-footer {
    width: calc(100% - 80px);
}
.chat-footer .form-group {
    width: 96% !important;
    margin: 2%;
}
.chat-footer .form-control{
    padding-right: 50px;
}
.chat-footer .btn{
    position: absolute;
    right: 30px;
}
.chat-content {
    /*display: block;*/
    padding: 150px 20px 150px 20px;
}
.chat-body{
    background-color: var(--card-color);
    padding: 10px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 30px;
    max-width: 70%;
    min-width: auto;
    display: inline-block;
    /*float: left;*/
    color: var(--h1-color);
    text-align: justify;
    line-height: 1.7rem;
    margin-left: 10px;
    margin-bottom: 5px;
}
.chat-body2{
    background-color: var(--sidebar-a-hover-color);
    padding: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 30px;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    max-width: 70%;
    min-width: auto;
    display: inline-block;
    float: right;
    color: var(--h1-color);
    text-align: justify;
    line-height: 1.7rem;
    margin-right: 10px;
    margin-bottom: 5px;
}
.chat-base {
    width: 100%;
    display: inline-block;
}
.chat-base .date{
    margin: 0 0 15px 70px;
    font-size: .7rem;
    font-weight: 300;
}
.chat-base .date2{
    float: right;
    margin: 0 70px 15px 0;
    font-size: .7rem;
    font-weight: 300;
}
/*#content .footer{*/
/*    margin-left: 250px;*/
/*}*/
/*#header .navbar-nav ul li.active > a, a[aria-expanded="true"] {*/
/*    color: #fff;*/
/*    background: initial !important;*/
/*}*/

.fa-flag {
    transform:scaleX(-1) !important;
}
.bg-comments {
    height: 40px;
    color: white;
    background-color: #6136a3!important;
    background-image: linear-gradient(135deg,#6136a3 0,#3f236a 100%) !important;
    border-radius: 10px;
    line-height: 40px;
}
.bg-shared {
    background-color: var(--bg-color);
    border: 1px solid var(--list-group-item-border);
    padding: 10px;
    border-radius: 10px;
}
.bg-sign {
    /*height: 500px;*/
    /*background-color: #e6efff;*/
    position: relative !important;
    /*background-image: url('../images/logo.svg');*/
    background-repeat: no-repeat;
    background-position: left;
    z-index: 5000;
}

.content-fluid {
    min-height: 100vh;
    width: 100%;
    /*background-repeat: no-repeat;*/
    /*background-position: top center;*/
    /*background-size: cover;*/
    /*margin: 0;*/
    /*padding: 0;*/
    /*border: 0;*/
    align-items: center;
    transition: all 0.3s;
}

#content {
    width: calc(100% - 250px);
    /*padding: 20px;*/
    min-height: 100vh;
    transition: all 0.3s;
    position: absolute;
    top: 30px;
    right: 0;
    /*z-index: -4;*/
}
.main-content .container-fluid{
    padding: 50px 30px 50px 30px!important;

}
#content.active {
    width: calc(100% - 80px);
}

.rounded {
    border-radius: 10px !important;
}

.card {
    border-radius: 10px !important;
    border: none !important;
    margin: 0px 0 20px 0;
    background-color: var(--card-color);
}

.card p a {
    color: #FF4D79;
}

.card p a:hover {
    color: #ce4058;
}
.card-body {
    padding: 1rem;
}
.post-title h2 {
    line-height: 30px!important;
}
.rounded-top {
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important
}
.scrollbar-track.show{
    border-radius: 30px!important;
    background-color: var(--bg-color) !important;
}
.scrollbar-thumb{
    height: 4px!important;
    background-color: var(--list-group-item-border) !important;
    z-index: 0!important;
}
.scroll-content {
    margin-bottom: 10px!important;
    margin-right: auto!important;
}
@-webkit-keyframes notify {
    0% {transform: scaleX(0);}
    10% {transform: scaleX(1);}
    13% {transform: scale(1);}
    16% {transform: scale(1);}
    55% {transform: scaleX(1); border-radius: 0%;}
    /*65% {transform: scaleX(0.25); border-radius: 50%;}*/
    /*95% {transform: scaleX(0.25); border-radius: 50%;}*/
    100% {transform: scale(1);}
}

@keyframes notify {
    0% {transform: scaleX(0);}
    10% {transform: scaleX(1);}
    13% {transform: scale(1);}
    16% {transform: scale(1);}
    55% {transform: scaleX(1); border-radius: 0%;}
    /*65% {transform: scaleX(0.25); border-radius: 50%;}*/
    /*95% {transform: scaleX(0.25); border-radius: 50%;}*/
    100% {transform: scale(1);}
}
.alert {
    min-width: 300px;
    position: fixed;
    top: 40px;
    right: 20px;
    z-index: 100;
    justify-content: center;
    opacity: 1;
    animation: notify 3s ease-in-out;
    will-change: opacity,transform;
    border-radius: 100px!important;
    box-shadow: 0 10px 10px rgba(0,0,0,.05);
}
.bookmark i{
    animation: notify 2s ease-in-out;
}
@keyframes bellshake {
    0% { transform: rotate(0); }
    15% { transform: rotate(5deg); }
    30% { transform: rotate(-5deg); }
    45% { transform: rotate(4deg); }
    60% { transform: rotate(-4deg); }
    75% { transform: rotate(2deg); }
    85% { transform: rotate(-2deg); }
    92% { transform: rotate(1deg); }
    100% { transform: rotate(0); }
}
.fa-bell {
    animation: bellshake 0.5s cubic-bezier(.36,.07,.19,.97) both infinite;
    backface-visibility: hidden;
    transform-origin: top right;
    transform: translate3d(0, 0, 0);
    animation-name: bellshake;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-webkit-keyframes like {
    0% {transform: scale(1);}
    40% {transform: scale(0.5);}
    80% {transform: scale(1.5);}
    100% {transform: scale(1);}
}

@keyframes like {
    0% {transform: scale(1);}
    40% {transform: scale(0.5);}
    80% {transform: scale(1.5);}
    100% {transform: scale(1);}
}
.like i{
    animation: like 0.5s ease-in-out;
}
input {
    background-color: var(--bg-input) !important;
    border-color: var(--list-group-item-border)!important;
    border-radius: 10px !important;
    -webkit-box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.20) !important;
    -moz-box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.20) !important;
    box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.20) !important;
}

input:focus {
    background-color: var(--bg-input) !important;
    border-color: var(--list-group-item-border)!important;
    border-radius: 10px !important;
    -webkit-box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.40) !important;
    -moz-box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.40) !important;
    box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.40) !important;
}

textarea {
    background-color: var(--bg-input) !important;
    border-color: var(--list-group-item-border)!important;
    border-radius: 10px !important;
    -webkit-box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.20) !important;
    -moz-box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.20) !important;
    box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.20) !important;
    /*box-shadow: 0 0px 10px 0 rgba(103, 151, 255, .1), 0 12px 20px 0 rgba(103, 151, 255, .1) !important;*/
    /*box-shadow: 0 1px 4px 0 rgba(103, 151, 255, .2), 0 0 0 1px rgba(103, 151, 255, .2);*/
}

textarea:focus {
    background-color: var(--bg-input) !important;
    border-color: var(--list-group-item-border)!important;
    border-radius: 10px !important;
    -webkit-box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.40) !important;
    -moz-box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.40) !important;
    box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.40) !important;
}
label {
    display: inline-block;
    margin-bottom: .5rem;
    color: var(--h1-color) !important;
}
.form-check {
    position: relative;
    display: inline-block;
    padding-left: 0.75rem;
}
.form-check-label {
    font-size: 0.85rem;
}
.dropdown-divider {
    border-color: var(--list-group-item-border);
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #999999 !important;
    font-size: 0.9rem !important;
    opacity: 0.7 !important; /* Firefox */
}

.img-thumbnail {
    border: none !important;
    box-shadow: 0 1px 4px 0 rgba(103, 151, 255, .2), 0 0 0 1px rgba(103, 151, 255, .2);
}
.uploadedFile{
    height: 500px;
    padding: 15px;
    overflow: auto;
}
.box {
    z-index: 999;
}
#collapseSearch {
    z-index: 2001;
    width: auto;
    position: fixed;
    right: 20px;
    top: 55px;
}
.searchItem_list .dropdown-menu {
    /*position: relative !important;*/
    /*top: 100%;*/
    /*right: 0;*/
    bottom: 0px;
    z-index: 999;
    display: none;
    float: right !important;
    min-width: 13rem !important;
    /*padding: .5rem 0;*/
    margin: 0 !important;
    /*box-shadow: 0 0px 5px 0 rgba(103, 151, 255, .30), 0 0px 5px 0 rgba(103, 151, 255, .30) !important;*/
    border: none !important;
    border-radius: 10px !important;
    /*border-bottom-left-radius: 10px !important;*/
    /*border-bottom-right-radius: 10px !important;*/
    /*border-top-left-radius: 0 !important;*/
    /*border-top-right-radius: 0 !important;*/
}

.searchItem_list .dropdown-menu ul {
    position: relative !important;
    top: 100%;
    right: 0;
    z-index: 2000;
    display: none;
    float: right !important;
    border-radius: 10px !important;
}

.dropdown-item {
    width: auto !important;
    font-size: 0.9rem;
    padding: 10px !important;
    margin: 0 .5rem 0.2rem .5rem !important;
    border-radius: 10px !important;
    color: var(--nav-link-color);
    /*background-color: var(--dropdown-item) !important;*/
}

.dropdown-item:hover {
    color: var(--nav-link-hover-color);
    background-color: var(--sidebar-a-hover-color) !important;
}

#search .form-group {
    width: 13rem !important;
    margin: 0 !important;
}

#search .form-control {
    border-radius: 40px !important;
}

.search_avatar {
    border-radius: 100%;
    width: 30px;
    height: 30px;
    position: relative;
    cursor: pointer;
    background-color: white;
    display: inline-block;
    background-size: cover;
    background-position: center center;
    -webkit-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    -moz-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    margin-right: 10px;
    margin-top: 5px;
}
.search_text {
    position: absolute;
    display: inline-block;
    margin-top: 10px;
}
/*#tag_list .dropdown-menu {*/
/*    position: relative !important;*/
/*    top: 100%;*/
/*    right: 0;*/
/*    z-index: 1000;*/
/*    display: none;*/
/*    float: right !important;*/
/*    min-width: 15rem;*/
/*    padding: .5rem 0;*/
/*    margin: 0 !important;*/
/*    font-size: 1rem;*/
/*    color: #212529;*/
/*    text-align: left;*/
/*    list-style: none;*/
/*    background-color: #fff !important;*/
/*    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;*/
/*    border: none !important;*/
/*    border-bottom-left-radius: 10px !important;*/
/*    border-bottom-right-radius: 10px !important;*/
/*    border-top-left-radius: 0 !important;*/
/*    border-top-right-radius: 0 !important;*/
/*}*/

/*#tag_list .dropdown-menu ul {*/
/*    position: relative !important;*/
/*    top: 100%;*/
/*    right: 0;*/
/*    z-index: 2000;*/
/*    display: none;*/
/*    float: right !important;*/
/*    border-radius: 10px !important;*/
/*}*/
.bg-profile {
    height: 200px;
    background-color: #999999;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.btn {
    border-radius: 100px !important;
    font-size: 0.9rem !important;
    font-weight: 400;
    height: 40px;
    min-width: 40px;
    line-height: 1.70;
    margin-bottom: 5px;
}

.btn-send {
    /*background-color: #084480;*/
    background-color: #3f236a;
    background-image: linear-gradient(65deg,#3f236a 0,#6136a3 100%);
    color: white;
    border: none;
    transition: 0.5s;
}

.btn-send:hover {
    background-color: #3f236a;
    color: white;
    transition: 0.5s;
}
.text-bookmark {
    color: var(--h5-color);
}
.btn-outline-light {
    color: #a0a0a0 !important;
    border-color: var(--list-group-item-border) !important;
}

.btn-outline-light:hover {
    background: none !important;
    /*border-color: #bbbbbb !important;*/
    color: #7a7a7a !important;
}
.btn-outline-light:focus {
    box-shadow: none !important;
    background: none!important;
}
.btn-outline-light:blank {
    /*box-shadow: none !important;*/
    background: none!important;
}
.btn-reaction {
    background: var(--sidebar-a-color)!important;
    color: #a0a0a0 !important;
    transition: 0.5s;
}

.btn-reaction:hover {
    background: var(--sidebar-a-hover-color)!important;
    color: var(--nav-link-hover-color) !important;
    transition: 0.5s;
}
.btn-outline-follow {
    background: none!important;
    color: #a0a0a0 !important;
    border-color: var(--list-group-item-border) !important;
    transition: 0.5s;
}

.btn-outline-follow:hover {
    border-color: var(--nav-link-hover-color) !important;
    color: var(--nav-link-hover-color) !important;
    transition: 0.5s;
}
.card .btn-outline-follow {
    /*margin-bottom: 10px;*/
}
.card .btn-hashtag {
    height: 30px;
    padding: 0 10px;
    border-radius: 10px!important;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
#mediaFile {
    width: 50px;
    position: absolute;
    top: 50px;
}
#mediaFile2 {
    width: 50px;
    position: absolute;
    top: 140px;
}
#mediaFile3 {
    position: absolute;
    top: -1000px;
    right: 0;
}
.cover-profile {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
    height: 200px;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
    background-color: #cbcbcb;
    display: table;
    background-size: cover;
    background-position: center center;
    z-index: 2;
}
.cover-profiles {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
    height: 200px;
    margin: 0 auto;
    position: relative;
    background-color: #cbcbcb;
    display: table;
    background-size: cover;
    background-position: center center;
    z-index: 2;
}
.update_cover .btn {
    right: 20px;
    position: absolute;
    margin-top: -60px;
    z-index: 3;
}
.dashes2 {
    position: absolute;
    top: 0;
    left: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
    height: 100%;
    border: 4px dashed #ff8793;
    opacity: 1;
}
#send-story {
    width: 100%;
    min-height: 200px;
    height: auto;
    margin: 0 auto;
    position: relative;
    /*top: -80px;*/
    /*margin-bottom: -80px;*/
    cursor: pointer;
    background-color: var(--sidebar-color);
    display: table;
    background-size: cover;
    border-radius: 10px;
    background-position: center center;
}
#send-story label {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: grey;
    opacity: 1;
}
#send-story .dashes {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px!important;
    width: 100%;
    height: 100%;
    border: 4px dashed var(--bg-color);
    opacity: 1;
}
#textarea_count {
    float: right;
    font-size: 0.8rem;
    padding: 5px;
    height: 25px;
}
.StoryAvatar {
    border-radius: 100%;
    width: 70px;
    height: 70px;
    position: relative;
    cursor: pointer;
    background-color: white;
    display: table;
    background-size: cover;
    background-position: center center;
    -webkit-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    -moz-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    z-index: 3;
}
.Avatar {
    border-radius: 100%;
    width: 150px;
    height: 150px;
    margin-top: -100px;
    position: relative;
    cursor: pointer;
    background-color: white;
    display: table;
    background-size: cover;
    background-position: center center;
    -webkit-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    -moz-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    z-index: 3;
}
.Avatars {
    border-radius: 100%;
    width: 150px;
    height: 150px;
    margin-top: -100px;
    margin-bottom: 10px;
    position: relative;
    background-color: white;
    display: table;
    background-size: cover;
    background-position: center center;
    -webkit-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    -moz-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    z-index: 3;
}
.update_avatar {
    position: relative;
    bottom: 30px;
    z-index: 4;
    margin-bottom: -20px;
}
.dashes {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100%;
    width: 100%;
    height: 100%;
    border: 4px dashed #ff8793;
    opacity: 1;
}
/*.card-body label {*/
/*    display: table-cell;*/
/*    vertical-align: middle;*/
/*    text-align: center;*/
/*    padding: 0 30px;*/
/*    color: grey;*/
/*    opacity: 1;*/
/*}*/
.dragging {
    background-image: none !important;
}
.dragging .dashes {
    animation-duration: 10s;
    animation-name: spin;
    animation-iteration-count:infinite;
    animation-timing-function: linear;
    opacity: 1!important;
}
/*label {*/
/*    display: table-cell;*/
/*    vertical-align: middle;*/
/*    text-align: center;*/
/*    padding: 0 30px;*/
/*    color: grey;*/
/*    opacity: 0.5!important;*/
/*}*/

/*.hasImage .dashes, label {*/
/*    opacity: 0;*/
/*    pointer-events: none;*/
/*    user-select: none;*/
/*}*/
.btn-green {
    display: inline-block;
    font-weight: 400;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    background-color: #9ddfd6;
    text-align: center !important;
    transition: 0.5s;
}

.btn-green:hover {
    background-color: #bcd9f7;
    transition: 0.5s;
}

.btn-white {
    background-color: white;
}

.btn-sm {
    /*padding: 0!important;*/
    border-radius: 10px !important;
}

.btn-sm i {
    line-height: 0 !important;
}

.btn i {
    line-height: 0 !important;
}

.alert-icon i {
    padding: 0 !important;
}

.send-post {
    position: absolute;
    height: 40px;
    width: 40px;
    margin-top: -15px !important;
}
.send-post-name {
    margin-left: 60px;
}
.instagram {
    background: #ed4956;
    color: white;
}
.instagram:hover {
    background: #cd3f4a;
    color: white;
}
.facebook {
    background: #00529c;
    color: white;
}
.facebook:hover {
    background: #004a8c;
    color: white;
}
.twitter {
    background: #55ACEE;
    color: white;
}
.twitter:hover {
    background: #4c9ad5;
    color: white;
}
.telegram {
    background: #0088cc;
    color: white;
}
.telegram:hover {
    background: #00679e;
    color: white;
}
#profile h2 {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
}

.lead {
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    line-height: 27px !important;
    color: var(--primary-color) !important;
}
.flex-center {
    position: relative;
    align-items: center;
    display: flex;
    justify-content: center;
}
.news-lead p{
    font-size: 0.9rem !important;
    font-weight: 300 !important;
    line-height: 27px !important;
    color: black !important;
}
.lead img {
    width: 100% !important;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .075), 0 0 0 1px rgba(0, 0, 0, .075) !important;
    border-radius: 10px !important;
    margin: 10px 0 10px 0;
}

/*.lead p {*/
/*    font-size: 1rem !important;*/
/*    color: black !important;*/
/*}*/

p img {
    width: 100% !important;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .075), 0 0 0 1px rgba(0, 0, 0, .075) !important;
    border-radius: 10px !important;
    margin: 10px 0 10px 0;
    padding: 5px!important;
}
.title h1 {
    color: white !important;
    opacity: 90%;
    font-weight: 600 !important;
}
/*.title h2 {*/
/*    font-size: 2rem !important;*/
/*    font-weight: 800 !important;*/
/*}*/

.title .fa {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
}

#postTitle h2 {
    font-size: 1.5rem !important;
}

.fas {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#content i {
    /*font-size: 0.9rem !important;*/
    /*padding: 7px 0 0 0 !important;*/
}
.verify i {
    font-size: .8rem !important;
    position: absolute;
    margin-top: -15px;
}
.badge {
    font-weight: 400 !important;
    font-size: 85% !important;
    padding: 5px !important;
    margin-bottom: 5px;
}
.invalid-feedback {
    font-size: 0.9rem!important;
    font-weight: 300!important;
    color: #dc3545;
}
/*.search {*/
/*    width: 100%;*/
/*    min-height: 50px;*/
/*    background-color: white;*/
/*    box-shadow: 0 4px 10px 0 rgba(103,151,255,.1),0 12px 20px 0 rgba(103,151,255,.1) !important;*/
/*    position: fixed!important;*/
/*    border-radius: 10px;*/
/*    z-index: 1000;*/

/*    padding: 10px;*/
/*}*/
.modal-dialog {
    z-index: 1210 !important;
    margin-top: 100px !important;
}

.modal-content {
    border-radius: 20px !important;
    border: none !important;
}

/*.modal-body a {*/
/*    color: #0a549e;*/
/*}*/

/*.modal-body a:hover {*/
/*    color: #0BB7AF;*/
/*}*/
#Followers .btn {
    height: auto!important;
}
#Following .btn {
    height: auto!important;
}

.card-body footer {
    padding-top: 10px;
    /*margin: 0 0 30px 0;*/
    border-top: 1px solid var(--list-group-item-border);
}
#pills-tab .nav-link {
    padding-right: 10px!important;
    padding-left: 10px!important;
}
/*#pills-tab .nav-link:hover {*/
/*    padding-right: 10px!important;*/
/*    padding-left: 10px!important;*/
/*    color: #FFFFFF!important;*/
/*}*/
#pills-tab .active {
    padding: 0 10px;
    color: #FFFFFF!important;
    background-color: #FF4D79;
    background-image: linear-gradient(65deg,#bf005d 0,#f55267 100%);
    border-radius: 100px !important;
}
#pills-tab .active:hover {
    padding: 0 10px;
    color: #FFFFFF!important;
    border-radius: 100px !important;
}
#pills-tab i {
    line-height: 0 !important;
}

#Sign .footer {
    position: fixed;
    bottom: 0;
    width: 50%;
    /*min-height: 45px;*/
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    padding: 5px;
    text-align: center;
    background-color: var(--navbar-color);
    color: var(--footer-a-color) !important;
}
.footer {
    position: fixed;
    bottom: 0;
    width: calc(100% - 250px);
    /*min-height: 45px;*/
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    padding: 5px;
    background-color: var(--navbar-color);
    color: var(--footer-a-color) !important;
    /*box-shadow: 0 10px 30px 0 rgba(103, 151, 255, .6), 0 12px 20px 0 rgba(103, 151, 255, .1) !important;*/
}
.footer a {
    color: var(--footer-a-color) !important;
}
.footer a:hover {
    color: var(--footer-a-hover-color) !important;
}
#content.active .footer {
    width: calc(100% - 80px);
}
#sidebar-avatar{
    border-radius: 100%;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    background: white;
    background-size: cover;
    background-position: center center;
    -webkit-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    -moz-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
}
.avatar {
    height: 50px !important;
    width: 50px !important;
    position: relative;
    background-color: white;
    background-size: cover;
    background-position: center center;
    -webkit-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    -moz-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    border-radius: 50%;
    border: 3px solid var(--card-color);
    padding: 3px;
}
.avatar-border {
    background-color: #FF4D79;
    background-image: linear-gradient(65deg,#bf005d 0,#f55267 100%);
    border-radius: 50%;
    padding: 2px;
}
.avatar-border2 {

    border-radius: 50%;
    border: 5px solid #efffff;
}
.header-avatar {
    height: 32px !important;
    width: 32px !important;
    position: relative;
    background-color: white;
    background-size: cover;
    background-position: center center;
    border-radius: 50%;
    margin: -4px 0 0 4px;
}
.scrolling-wrapper {
    -webkit-overflow-scrolling: touch;
}
.scrolling-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
.scrolling-wrapper::-webkit-scrollbar {
     display: none;
}
.story-name {
    font-size: 0.85rem;
}
.avatar_story {
    height: 40px !important;
    width: 40px !important;
    position: relative;
    background-color: white;
    background-size: cover;
    background-position: center center;
    -webkit-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    -moz-box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    box-shadow: 0 0 10px 0 rgba(26,46,86,0.07) !important;
    border-radius: 50%;
}
.carousel-caption {
    bottom: 0!important;
}
.carousel-caption h4 {
    background-color: var(--bg-color);
    font-size: 0.9rem!important;
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
    opacity: 0.8;
}
.carousel-caption h6 {
    background-color: var(--bg-color);
    color: var(--h3-color);
    font-size: 0.85rem!important;
    padding-right: 5px;
    padding-left: 5px;
    border-radius: 5px;
    display: inline-block;
    opacity: 0.7;
}
.avatar-social-body {
    float: right;
    padding: 5px;
    /*border-radius: 50%;*/
    transition: .5s;
}
.avatar-social-body:hover {
    border-radius: 10px;
    background-color: #FF4D79;
    background-image: linear-gradient(65deg,#bf005d 0,#f55267 100%);
    color: #FFFFFF;
    transition: .5s;
}
.profile-avatars {
    position: relative;
    z-index: 3;
    height: 150px !important;
    width: 150px !important;
    margin-top: -100px;
    border: none !important;
}
.time {
    font-weight: 300;
    font-size: 0.8rem;
    margin-top: -3px;
}
.scrolling-wrapper::-webkit-scrollbar{
    height: 4px;
    width: 4px;
    background: gray;
}
.scrolling-wrapper::-webkit-scrollbar-thumb:horizontal{
    background: #000;
    border-radius: 10px;
}
.scrolling-wrapper::-webkit-scrollbar {
    width: 4px;
    border: 1px solid #d5d5d5;
}

.scrolling-wrapper::-webkit-scrollbar-track {
    border-radius: 0;
    background: #eeeeee;
}

.scrolling-wrapper::-webkit-scrollbar-thumb {
    border-radius: 0;
    background: #b0b0b0;
}
/*.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {*/
/*    color: #ffffff;*/
/*    background-color: #0BB7AF;*/
/*    border-color: #0BB7AF #0BB7AF #fff;*/
/*    border-bottom: none !important;*/
/*}*/

/*.nav-tabs {*/
/*    margin-bottom: -10px !important;*/
/*    border-bottom: 5px solid #0BB7AF;*/
/*}*/

.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.card-header {
    background: none !important;
}

.bg-tabs {
    background-color: var(--navbar-color);
    /*border-top: 1px solid #bbebe9;*/
}

.bg-social {
    background-color: #FF4D79;
    background-image: linear-gradient(65deg,#bf005d 0,#f55267 100%);
}

.card-text {
    font-size: 0.9rem !important;
}

/*.login {*/
/*    background-color: #e6efff;*/
/*    border-top-left-radius: 20px;*/
/*    border-top-right-radius: 20px;*/
/*    border-bottom: 2px solid #cbdeff;*/
/*}*/

/*.login img {*/
/*    height: 120px !important;*/
/*    margin-bottom: 5px;*/
/*}*/

/*#Login .modal-title {*/
/*    margin-top: -20px;*/
/*    height: 40px !important;*/
/*    line-height: 18px;*/
/*    background-color: #ffffff !important;*/
/*    border-radius: 100px !important;*/
/*    margin-bottom: 20px;*/
/*    text-align: center;*/
/*    border: 2px solid #cbdeff;*/
/*    font-size: 18px !important;*/
/*    font-weight: 400 !important;*/
/*    !*color: white;*!*/
/*}*/

/*.register {*/
/*    background-color: #e1fff7;*/
/*    border-top-left-radius: 20px;*/
/*    border-top-right-radius: 20px;*/
/*    border-bottom: 2px solid #bdffed;*/
/*}*/

/*.register img {*/
/*    height: 120px !important;*/
/*    margin-bottom: 5px;*/
/*}*/

/*#Register .modal-title {*/
/*    margin-top: -20px;*/
/*    height: 40px !important;*/
/*    line-height: 18px;*/
/*    background-color: #ffffff !important;*/
/*    border-radius: 100px !important;*/
/*    margin-bottom: 20px;*/
/*    text-align: center;*/
/*    border: 2px solid #bdffed;*/
/*    font-size: 18px !important;*/
/*    font-weight: 400 !important;*/
/*}*/
/*.nav-item li a:hover{*/
/*    color: #fff!important;*/
/*}*/
.btn-register {
    display: inline-block;
    text-decoration: none;
    border-radius: 100px;
    position: relative;
    background-color: #FF4D79;
    background-image: linear-gradient(65deg,#bf005d 0,#f55267 100%);
    /*bf005d*/
    /*d70058*/
    /*background-image: linear-gradient(65deg,#FF4D79 0,#FF809F 100%);*/
    -webkit-backface-visibility: hidden;
    /*z-index: 1;*/
    border: none!important;
}
.btn-register:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff!important;
    border-radius: 100px;
    background-color: #d70058;
    background-image: linear-gradient(135deg,#ff387f 0,#d70058 100%);
    transition: opacity 0.5s ease-out;
    /*z-index: 2;*/
    opacity: 0;
    border: none!important;
}
.btn-register:hover:after {
    opacity: 1;
    color: #fff!important;
}
.btn-register:focus {
    color: white;
    background-color: #d70058;
    background-image: linear-gradient(135deg,#ff387f 0,#d70058 100%);
}
.btn-register:active {
    color: white!important;
    background-color: #d70058;
    background-image: linear-gradient(135deg,#ff387f 0,#d70058 100%);
}
.btn-register li:active {
    background-color: #d70058;
    background-image: linear-gradient(135deg,#ff387f 0,#d70058 100%);
}
.btn-register span {
    position: relative;
    z-index: 3;
    color: rgba(255,255,255,.80);!important;
    transition: 0.5s;
}
.btn-register:hover span {
    position: relative;
    z-index: 3;
    color: white;!important;
    transition: 0.5s;
}
.btn-login {
    display: inline-block;
    text-decoration: none;
    border-radius: 100px;
    position: relative;
    background-color: #3f236a;
    background-image: linear-gradient(65deg,#3f236a 0,#6136a3 100%);
    /*bf005d*/
    /*d70058*/
    /*background-image: linear-gradient(65deg,#FF4D79 0,#FF809F 100%);*/
    -webkit-backface-visibility: hidden;
    /*z-index: 1;*/
    border: none;
}
.btn-login:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff!important;
    border-radius: 100px;
    background-color: #6136a3;
    background-image: linear-gradient(135deg,#6136a3 0,#3f236a 100%);
    transition: opacity 0.5s ease-out;
    /*z-index: 2;*/
    opacity: 0;
    border: none;
}
.btn-login:hover:after {
    opacity: 1;
    color: #fff!important;
}
.btn-login:focus {
    background-color: #6136a3;
    background-image: linear-gradient(135deg,#6136a3 0,#3f236a 100%);
}
.btn-login li:active {
    background-color: #6136a3;
    background-image: linear-gradient(135deg,#6136a3 0,#3f236a 100%);
}
.btn-login span {
    position: relative;
    z-index: 3;
    color: rgba(255,255,255,.80);!important;
    transition: 0.5s;
}
.btn-login:hover span {
    position: relative;
    z-index: 3;
    color: white;!important;
    transition: 0.5s;
}
.dropdown .dropdown-menu {
    border: none;
    border-radius: 10px !important;
    background-color: var(--dropdown-menu);
    /*margin-top: -5px!important;*/
}

.border-bottom {
    border-color: var(--list-group-item-border) !important;
}

.card-header {
    border-bottom: 2px solid var(--list-group-item-border) !important;
}
.text-info {
    color: #0BB7AF !important;
}

.text-blue {
    color: #0b5eb1;
}
.subscribe2 {
    display: none;
}

#Links .nav-link {
    direction: rtl !important;
    text-align: right;
    background-color: #f2f6ff;
    border-radius: 10px;
    margin-top: 5px;
    margin-right: 0;

}

#Links .nav-link:hover {
    background-color: #bdffed;
}

#Links .nav-link i {
    line-height: 0 !important;
    margin-left: 10px;
}

.nav {
    padding-right: 0;
}
.alert-success {
    background-color: #63d78d;
    background-image: linear-gradient(135deg,#22b89d 0,#63d78d 100%);
    color: white;
    border: none;
}
.alert-boorsfa {
    color: #084480;
    background-color: #c7e0ff;
    border-color: #a1cbff;
    border-radius: 10px !important;
    text-align: center !important;
}

.dropdown-menu.show {
    display: block;
    border: none !important;
    -webkit-box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.40) !important;
    -moz-box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.40) !important;
    box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.40) !important;
}
.custom-file-input:lang(en) ~ .custom-file-label::after {
    content: "Browse" !important;
}
.custom-file-input {
    color: black !important;
}
.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5;
    padding: .3rem 0.5rem;
    line-height: 1.5;
    color: var(--placeholder) !important;
    background-color: var(--card-color)!important;
    border: .075rem solid var(--list-group-item-border);
    border-radius: 10px;
    /*box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(calc(2.25rem + 2px) - 1px * 2);
    padding: .375rem .75rem;
    line-height: 1.5;
    color: var(--placeholder);
    content: "Browse";
    background-color: var(--bg-color);
    border-left: 1px solid var(--list-group-item-border);
    border-radius: 0 10px 10px 0;
}
textarea {
    resize: none;
}
.mybadge {
    width: 20px;
    height: 20px;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50%;
    background-color: #ffffff;
    margin: -10px;
}

.mybadge i {
    position: relative;
    z-index: 3;
    width: inherit;
    height: inherit;
    align-items: center !important;
    justify-content: center !important;
}

.alert {
    border-radius: 10px!important;
}

@keyframes pulse {
    0% {
        opacity: 0.5;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.pulser {
    position: absolute;
    z-index: 1;
    width: inherit;
    height: inherit;
    align-items: center !important;
    justify-content: center !important;
    border-radius: inherit;
    background-color: #00cc9c;
    animation: pulse 1.75s ease-out infinite;
}

table {
    text-align: right;
    margin: 0 auto;
    border: none !important;
}

table p {
    color: black !important;
    font-size: 0.9rem;
}

th {
    background-color: var(--placeholder);
    color: white;
    font-size: 20px;
    border: none !important;
    border-radius: 10px;
}

td, table {
    /*border-color: white!important;*/
    /*border: 2px solid white!important;*/
    padding: 10px 50px 10px 50px;
    text-align: center;
    border: none !important;
    color: var(--placeholder);
}

tr:nth-child(odd) {
    border-radius: 10px;
    background: var(--sidebar-color) !important;
    transition: 1s;
    border-bottom: 1px solid var(--list-group-item-border) !important;
}

tr:nth-child(odd):hover {
    background: var(--navbar-color) !important;
    color: black;
    transition: 1s;
}

tr:nth-child(even) {
    background: var(--bg-color) !important;
    transition: 1s;
    border-bottom: 1px solid var(--list-group-item-border) !important;
}

tr:nth-child(even):hover {
    background: var(--navbar-color) !important;
    color: black;
    transition: 1s;
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background: none;
    border-color: var(--list-group-item-border) !important;
}
.page-item .page-link {
    z-index: 1;
    color: var(--nav-link-color) !important;
    text-align: center;
    line-height: 17px !important;
    background-color: var(--sidebar-color) !important;
    border-color: var(--list-group-item-border) !important;
    border-radius: 50% !important;
    border: 2px solid;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    width: 35px !important;
    height: 35px !important;
    margin: 5px !important;
}
.page-item .page-link:hover {
    z-index: 1;
    color: var(--nav-link-color) !important;
    text-align: center;
    line-height: 17px !important;
    background-color: var(--sidebar-color) !important;
    border-color: var(--card-title-hover) !important;
    border-radius: 50% !important;
    border: 2px solid;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    width: 35px !important;
    height: 35px !important;
    margin: 5px !important;
}

/*
 * bootstrap-tagsinput v0.8.0
 *
 */

.bootstrap-tagsinput {
    box-shadow: 0 1px 4px 0 rgba(103, 151, 255, .2), 0 0 0 1px rgba(103, 151, 255, .2);
    padding: 4px 6px;
    color: #555;
    vertical-align: middle;
    border-radius: 10px;
    max-width: 100%;
    line-height: 22px;
    cursor: text;
}

.bootstrap-tagsinput input {
    padding: 5px;
    margin: 5px;
    width: auto;
    max-width: inherit;
}
.form-control {
    color: var(--placeholder) !important;
}

.bootstrap-tagsinput.form-control input::-moz-placeholder {
    color: var(--placeholder) !important;
    opacity: 1;
}

.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
    color: var(--placeholder) !important;
}

.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
    color: var(--placeholder) !important;
}

.bootstrap-tagsinput input:focus {
    border: none;
    box-shadow: none;
}

.bootstrap-tagsinput .tag {
    margin: 5px 5px 5px 0px;
    padding: 5px 5px 5px 10px;
    background-color: #0a549e;
    color: white;
    border-radius: 5px;
}

.bootstrap-tagsinput .tag [data-role="remove"] {
    margin-right: 5px;
    margin-left: 5px;
    float: right;
    cursor: pointer;
}

.bootstrap-tagsinput .tag [data-role="remove"]:after {
    content: "x";
    padding: 0px 2px;
}

.bootstrap-tagsinput .tag [data-role="remove"]:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.copyright {
    font-size: 14px;
    font-weight: 300;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

.navbar-nav .nav-item .dropdown-menu{  display:block; opacity: 0;  visibility: hidden; transition:.5s; margin-top:0;  }
.navbar-nav .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
.navbar-nav .dropdown-menu.fade-up{ top:180%;  }
.navbar-nav .nav-item:hover .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; top:100%; transform: rotateX(0deg); }

.nav .nav-item .dropdown-menu{  display:block; opacity: 0;  visibility: hidden; transition:.5s; margin-top:0;  }
.nav .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
.nav .dropdown-menu.fade-up{ top:180%;  }
.nav .nav-item:hover .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; top:100%; transform: rotateX(0deg); }

@media (max-width: 990px) {
    .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-xl {
        padding-right: 15px;
        padding-left: 15px;
    }
    .input-field {
        margin: 5px;
    }
    #content {
        width: 100%;
        margin-top: 20px;
    }
    #content.active {
        width: 100%;
    }
    #sidebar {
        min-width: 200px;
        max-width: 200px;
        text-align: center;
        margin-left: -200px !important;
        /*z-index: 1000;*/

        /*border-bottom-left-radius: 30px;*/
    }

    #sidebar .avatar {
        height: 50px !important;
        width: 50px !important;
    }
    #sidebar-avatar{
        height: 50px !important;
        width: 50px !important;
    }

    .dropdown-toggle::after {
        top: auto;
        bottom: 10px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }

    .dropdown, .dropleft, .dropright, .dropup {
        /*margin-top: 10px;*/
        text-align: right;
    }

    .mob {
        display: block;
        width: 100%;
        margin-top: 10px;
    }

    .mob .ml-2 {
        margin: 0 !important;
    }
    #sidebar.active {
        margin-left: 0 !important;
    }

    #sidebar .sidebar-header h1,
    #sidebar .CTAs {
        display: none !important;
    }
    #sidebar .sidebar-header strong {
        display: block;
    }

    #sidebar ul li a {
        padding: 20px 10px;
        /*display: none;*/
    }

    #sidebar ul li a span {
        font-size: 0.85em;
    }

    #sidebar ul li a i {
        margin-right: 0;
        display: block;
    }

    #sidebar ul ul a {
        padding: 10px !important;
    }

    #sidebar span {
        display: none;
    }

    #sidebar ul li a i {
        font-size: 1.3em;
    }

    #sidebar {
        margin-left: 0;
    }

    #sidebarCollapse span {
        display: none;
    }

    .text-menu span {
        display: none !important;
    }

    /*.form-inline {*/
    /*    display: inline-block;*/
    /*}*/

    #invesment {
        display: none;
    }

    #bg-sign {
        display: none;
    }

    #sidebar h2 {
        display: none;
    }

    #Tab1 .tabList {
        display: none;
    }

    #Tab1 i {
        margin: 0 !important;
    }
    #Tab2 .tabList {
        display: none;
    }

    #Tab2 i {
        margin: 0 !important;
    }
    .navbar-nav .nav-link {
        padding-right: 10px;
        padding-left: 10px;
    }
    .main-content .container-fluid {
        padding: 20px!important;
    }
    .s006 {
        display: none!important;
    }
    #content .footer{
        width: 100%;
    }
    #content.active .footer {
        width: 100%;
    }
    #content.active .chat-footer {
        width: 100%;
    }
    .chat-footer {
        width: 100%;
    }
    #sidebar h3 {
        display: none!important;
    }
    .chat-head {
        margin-top: 10px;
    }
    .alert {
        top: 100px;
        right: 20px;
    }
    .StoryAvatar {
        width: 60px;
        height: 60px;
    }

}

@media (max-width: 768px) {
    .main-content {
        margin-bottom: 60px!important;
    }
    .mainLogo {
        height: 20px;
    }
    .Logo {
        margin: 5px 0 0 0!important;
    }
    .subscribe2 {
        display: block;
        margin: 0 0 50px 0;
    }

    .subscribe {
        display: none;
    }
    #search .form-group {
        width: 8rem !important;
        margin: 0 !important;
    }
    .chat-footer {
        margin-bottom: 20px;
    }
    .chat-footer .btn{
        top:30% !important;
    }
    /*.chat-content {*/
    /*    padding: 140px 20px 180px 20px;*/
    /*}*/
    #Sign .footer {
        width: 100%;
    }

}
@media (max-width: 540px){
    .logo {
        height: 20px;
    }
    .chat-content {
        padding: 140px 20px 160px 20px;
    }
    .chat-footer .btn{
        top:27% !important;
    }
    .Avatar {
        height: 120px !important;
        width: 120px !important;
        margin-top: -80px;
        border: none !important;
    }
    .Avatars {
        height: 120px !important;
        width: 120px !important;
        margin-top: -80px;
        border: none !important;
    }
    .StoryAvatar {
        width: 50px;
        height: 50px;
    }
    h1 {
        padding-top: 0!important;
        font-size: 0.9rem !important;
    }
    h3 {
        padding-top: 0!important;
        font-size: 0.9rem !important;
    }
    .avatar {
        width: 40px!important;
        height: 40px!important;
    }
    .card-body {
        padding: 0.5rem;
    }
    .btn {
        border-radius: 100px !important;
        font-size: 0.85rem !important;
        font-weight: 400;
        height: 35px;
        min-width: 35px;
        line-height: 1.4;
        margin-bottom: 5px;
    }
    .navbar .container-fluid {
        padding: 0 10px!important;
    }
}
.multiselect-container {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    right: 0 !important;
    height: 200px !important;
    width: auto !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scroll-padding-right: auto !important;
}

.multiselect-container .input-group {
    margin: 5px;
}

.multiselect-container > li {
    padding: 0
}

.multiselect-container > li > a.multiselect-all label {
    font-weight: 700
}

.multiselect-container > li.multiselect-group label {
    margin: 0;
    padding: 3px 20px 3px 20px;
    height: 100%;
    font-weight: 700
}

.multiselect-container > li.multiselect-group-clickable label {
    cursor: pointer
}

.multiselect-container > li > a {
    padding: 0
}

.multiselect-container > li > a > label {
    margin: 0;
    height: 100%;
    cursor: pointer;
    font-weight: 400;
    padding: 3px 20px 3px 40px
}

.multiselect-container > li > a > label.radio, .multiselect-container > li > a > label.checkbox {
    margin: 0
}

.multiselect-container > li > a > label > input[type=checkbox] {
    margin-bottom: 5px
}

.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio {
    padding: 3px 20px 3px 40px
}

.form-inline .multiselect-container li a label.checkbox input[type=checkbox], .form-inline .multiselect-container li a label.radio input[type=radio] {
    margin-left: -20px;
    margin-right: 0
}

.h_iframe_embed_frame {
    position: relative;
}

.h_iframe_embed_frame .ratio {
    display: block;
    width: 100%;
    height: auto;
}

.h_iframe_embed_frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.note-editor.note-frame {
    border: none!important;
    box-shadow: 0 1px 4px 0 rgba(103, 151, 255, .2), 0 0 0 1px rgba(103, 151, 255, .2);
    border-radius: 10px!important;
    padding: 5px!important;
}
.outerDivFull { margin-top:5px; }

.switchToggle input[type=checkbox]{height: 0; width: 0; visibility: hidden; position: absolute; }
.switchToggle label {cursor: pointer; text-indent: -9999px; width: 70px; max-width: 60px; height: 25px; background: #d1d1d1; display: block; border-radius: 100px; position: relative; }
.switchToggle label:after {content: ''; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; background: #fff; border-radius: 90px; transition: 0.2s; }
.switchToggle input:checked + label, .switchToggle input:checked + input + label  {background: #3e98d3; }
.switchToggle input + label:before, .switchToggle input + input + label:before {content: ''; position: absolute; top: 0px; left: 29px; width: 24px; height: 21px; border-radius: 90px; transition: 0.2s; text-indent: 0; color: #fff; }
.switchToggle input:checked + label:before, .switchToggle input:checked + input + label:before {content: ''; position: absolute; top: 0px; left: 5px; width: 24px; height: 21px; border-radius: 90px; transition: 0.2s; text-indent: 0; color: #fff; }
.switchToggle input:checked + label:after, .switchToggle input:checked + input + label:after {left: calc(100% - 2px); transform: translateX(-100%); }
.switchToggle label:active:after {width: 60px; }
.toggle-switchArea { margin: 10px 0 10px 0; }
#error_email {
    min-height: 0px!important;
    display: inherit;
    font-size: 0.8rem;
    font-weight: 400;
}
#error_username {
    min-height: 0px!important;
    display: inherit;
    font-size: 0.8rem;
    font-weight: 400;
}
.has-error
{
    border-color:#BF005D!important;
    /*background-color:#ffff99!important;*/
}
.dropzone {
    border-radius: 20px!important;
    margin: 10px!important;
    border-color: #0a549e!important;
}
.carousel-control-prev {
    background-image: linear-gradient(to left,rgba(0,0,0,0) 0,rgba(0,0,0,.2) 100%);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.carousel-control-prev:hover {
    background-image: linear-gradient(to left,rgba(0,0,0,0) 0,rgba(0,0,0,.3) 100%);
}
.carousel-control-next {
    background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,.2) 100%) !important;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}
.carousel-control-next:hover {
    background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,.3) 100%) !important;
}
.modal {
    z-index: 1300!important;
    padding-right: 0!important;
}
.modal-body{
    max-height: 550px!important;
    overflow-y: auto!important;
}
.modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
}
.modal-header .modal-title {
    padding: 1rem 1rem;
    margin: -1rem auto -1rem -1rem!important;
}
.modal-header {
    border-bottom: 1px solid var(--list-group-item-border) !important;
}
.modal-footer {
    padding: 0.5rem!important;
    border-top: 1px solid var(--list-group-item-border) !important;
}
.modal-header .close {
    position: relative;
    padding: 0!important;
    /*margin-right: 0!important;*/
    min-height: 50px;
    min-width: 50px;
    background-color: var(--sidebar-a-color);
    color: var(--nav-link-color);
    margin: -30px -30px 0 0;
    border-radius: 50%;
    opacity: 0.9 !important;
    text-shadow: none!important;
}
.modal-dialog{
    overflow-y: initial !important
}
.modal-content {
    background-color: var(--card-color);
}
.mCustomScrollbar {
    padding: 0 0 30px 0!important;
}
.mCSB_dragger_bar{background-color:var(--mCSB_dragger_bar) !important;background-color:rgba(255,255,255,.75);filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:var(--mCSB_dragger_bar) !important;background-color:rgba(255,255,255,.85);filter:"alpha(opacity=85)";-ms-filter:"alpha(opacity=85)"}
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:var(--mCSB_dragger_bar) !important;background-color:rgba(255,255,255,.9);filter:"alpha(opacity=90)";-ms-filter:"alpha(opacity=90)"}
.SideNav{
    overflow:hidden;
}
.screen-overlay {
    width:0%;
    height: 100%;
    z-index: 1300;
    position: fixed;
    top: 0;
    left: 0;
    opacity:0;
    visibility:hidden;
    background-color: rgba(34, 34, 34, 0.6);
    transition:opacity .2s linear, visibility .1s, width 1s ease-in;
}
.screen-overlay.show {
    transition:opacity .5s ease, width 0s;
    opacity:1;
    width:100%;
    visibility:visible;
}

.SideNav{
    width:350px;
    visibility: hidden;
    transform:translateX(-100%);
    transition:all .2s;
    border-radius:0;
    box-shadow: 0 5px 10px rgba(0,0,0, .2);
    display:block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1200;
    background-color: var(--bg-color);
    overflow-y: hidden;
    overflow-x: hidden;
}

.SideNav.SideNav-right {
    right: 0;
    left: auto;
    transform: translateX(100%);
}

.SideNav.show{
    visibility: visible;
    transform: translateX(0);
    transition: transform .2s;
    z-index: 2303;
}
.bg-SideNav {
    background-color: var(--bg-SideNav);
    z-index: 1300;
}
.SideNav .btn-close{ position: absolute; right:20px; top:20px; }
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 5px;
    background-color: #eee;
    font-size: 0.85rem!important;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: var(--pills-tab-active);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 8px;
    top: 5px;
    width: 5px;
    height: 8px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
#Comment >
a[aria-expanded="true"] {
    color: rgba(255,255,255,.80);!important;
    background-color: #FF4D79;
    background-image: linear-gradient(65deg,#bf005d 0,#f55267 100%);
}
#Comment > a:hover[aria-expanded="true"] {
    color: rgba(255,255,255,1);!important;
    background-color: #FF4D79;
    background-image: linear-gradient(65deg,#bf005d 0,#f55267 100%);
}

.custom-control-input:focus~.custom-control-label::before {
    border-color: #FF4D79 !important;
}

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

.custom-control-input:active~.custom-control-label::before {
    background-color: #FF4D79 !important;
    border-color: #FF4D79 !important;
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: #FF4D79 !important;
}

.custom-control-input-green:not(:disabled):active~.custom-control-label::before {
    background-color: #FF4D79 !important;
    border-color: #FF4D79 !important;
}

.inputor {
    height: 160px;
    width: 100%;
    /*border: 1px solid #dadada;*/
    /*border-radius: 10px;*/
    padding: 5px 8px;
    outline: 0 none;
    background: white;
    font-size: inherit;
}
.inputor:focus {
    border: 1px solid rgb(6, 150, 247);
}
.atwho-view::-webkit-scrollbar {
    display: none;
}
.atwho-view {
    width: 250px;
    position:absolute;
    top: 0;
    left: 0;
    display: none;
    margin-top: 18px;
    background: white;
    color: black;
    border-radius: 10px;
    /*border: 1px solid #DDD;*/
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    min-width: 120px;
    z-index: 11110 !important;
    padding-bottom: 5px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    /*-webkit-overflow-scrolling: touch;*/
}

.atwho-view .atwho-header {
    padding: 5px;
    margin: 5px;
    cursor: pointer;
    border-bottom: solid 1px #eaeff1;
    color: #6f8092;
    font-size: 11px;
    font-weight: bold;
}

.atwho-view .atwho-header .small {
    color: #6f8092;
    float: right;
    padding-top: 2px;
    margin-right: -5px;
    font-size: 12px;
    font-weight: normal;
}

.atwho-view .atwho-header:hover {
    cursor: default;
}

.atwho-view .cur {
    border-radius: 10px;
    background: #FF4D79;
    color: white;
}
.atwho-view .cur small {
    color: white;
}
.atwho-view strong {
    color: #FF4D79;
}
.atwho-view .cur strong {
    color: white;
    font-weightt:bold;
}
.atwho-view ul {
     /*width: 250px;*/
    list-style:none;
    padding:5px;
    margin:auto;
    /*max-height: 200px;*/
    /*overflow-x: scroll;*/
    /*white-space: nowrap;*/
}
.atwho-view ul li {
    display: inline-block;
    padding: 5px 10px;
    /*border-bottom: 1px solid #DDD;*/
    cursor: pointer;
    /* border-top: 1px solid #C8C8C8; */
}
.atwho-view small {
    font-size: smaller;
    color: #777;
    font-weight: normal;
}
/*override atwho's style*/
.atwho-inserted {
    color: #FF4D79;
}
.atwho-query {
    color: #FF4D79;
}

.cl-switch input[type="checkbox"] {
    display: none;
    visibility: hidden; }
.cl-switch .switcher {
    display: inline-block;
    border-radius: 100px;
    width: 35px;
    height: 15px;
    background-color: #ccc;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: middle;
    cursor: pointer; }
.cl-switch .switcher:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    margin-top: -2.5px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; }
.cl-switch .switcher:active:before {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 10px rgba(191, 0, 93, 0.3);
    transition: all, 0.1s; }
.cl-switch .label {
    font-family: "Roboto", sans-serif;
    cursor: pointer;
    vertical-align: middle;
    margin: 0 5px; }
.cl-switch input[type="checkbox"]:checked + .switcher {
    background-color: #FF4D79; }
.cl-switch input[type="checkbox"]:checked + .switcher:before {
    left: 100%;
    margin-left: -20px;
    background-color: #bf005d; }
.cl-switch [disabled]:not([disabled="false"]) + .switcher {
    background: #ccc !important; }
.cl-switch [disabled]:not([disabled="false"]) + .switcher:active:before {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; }
.cl-switch [disabled]:not([disabled="false"]) + .switcher:before {
    background-color: #e2e2e2 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; }
.lang {
    width: 50px!important;
}