input {
    height: auto;
}

body.mybody {
    font-size: 1.6rem;
}

a {
    cursor: pointer;
}

.btn,
input {
    margin: 2px;
}

@media print {
    a:after {
        content: "";
    }

    a[href]:after {
        content: none !important;
    }
}

@media print {
    @page {
        size: auto !important;
    }
}

.dropdown-toggle::after {
    border-width: 5px;
    vertical-align: baseline !important;
}

label {
    margin: auto 0 auto 0;
    padding: 5px 0 5px 0;
}

.textlarge {
    font-size: 1.8em !important;
    font-weight: bold;
}

.titlepage,
.titlepage > li {
    font-size: larger !important;
    font-weight: bold;
    padding: 5px 10px 5px 5px;
    border-radius: 3px 3px 0 0;
    background-color: #20c997;
    color: whitesmoke;
}

.cardhighlight:hover {
    transform: scale(1.05);
    transition: transform 0.2s;
}

.small-box:hover {
    transform: scale(1.05);
    transition: transform 0.2s;
}

input[required],
select[required] {
    /*background-image: radial-gradient(goldenrod 15%, transparent 16%) !important;*/
    /*background-size: 1em 1em !important;*/
    /*background-position: top right !important;*/
    /*background-repeat: no-repeat !important;*/
    border-bottom: 5px solid gold !important;
    border: 1px solid darkgray;
    height: auto;
}

input[type="email"] {
    direction: ltr;
    text-align: center;
}

textarea[required] {
    border-bottom: 5px solid gold;
    border: 1px solid darkgray;
}

html {
    height: 100%;
    direction: rtl;
}

.errormessage {
    margin-top: 2px;
    color: white;
    text-shadow: 0 0 2px white;
    box-shadow: 0 0 3px crimson;
    padding: 7px 5px 7px 5px;
    border: 2px solid red;
    border-radius: 5px;
    clear: both;
    background-color: black;
}

#errorMessagesInvalidForm {
    /*background-color: maroon;*/
    padding: 10px;
    /*color: whitesmoke;*/
    display: none;
    border-radius: 5px;
    list-style: none;
}

.plainerrormessage {
    color: maroon;
    text-shadow: 0 0 2px white;
    clear: both;
    background-color: khaki;
    padding: 5px;
    margin: 5px;
    border-radius: 3px;
}

.errormessage2 {
    color: maroon;
    text-shadow: 0 0 2px white;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px 0 0 0;
    margin: 1px;
    clear: both;
}

.errormessage:before {
    content: "✱";
    color: white;
    font-weight: bold;
}

.errormessage2:before {
    content: "✱";
    color: white;
    font-weight: bold;
}

div[required] {
    color: maroon !important;
    font-weight: bold;
    direction: rtl;
    height: auto;
}

div[required]::after {
    content: "* لطفا توجه داشته باشید که بخش های الزامی با زیر خط طلایی متمایز می شوند";
    color: black;
    text-shadow: 0 0 3px white;
    padding: 3px;
    margin: 2px;
    line-height: 2;
    border-bottom: 3px solid gold;
}

.cover-cardGallery:hover {
    transform: scale(1.05);
    transition: transform 0.2s;
    background-color: white;
    z-index: 999;
}

.cover-cardGallery {
    border: 2px solid white;
    background: silver;
    padding: 0;
    margin: 0;
    height: 200px;
}

.cover-cardGallery > p {
    text-align: center;
    background-color: rgba(6, 6, 6, 0);
    color: rgba(6, 6, 6, 0);
    width: 100%;
    height: 100%;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 0 0 0 transparent;
    z-index: 999;
}

.cover-cardGallery > p > span {
    text-shadow: 0 0 0 transparent;
    z-index: 999;
}

.cover-cardGallery:hover > p {
    background-color: rgba(6, 6, 6, 0.3);
    color: white;
    text-shadow: 3px 3px 10px #000;
}

.cover-cardGallery:hover {
    transform: scale(1.05);
    transition: transform 0.2s;
    background-color: white;
    z-index: 999;
}

.galleryicons {
    position: relative;
    bottom: 48px;
    width: 100%;
    opacity: 0.8;
    background-color: gray;
    height: 42px;
}

.footer {
    /*position: fixed;*/
    /*left: 0;*/
    /*bottom: 0;*/
    background-color: rgba(255, 255, 255, 0.5);
    padding: 10px 0 10px 0;
    /*text-align: center;*/
    width: 100%;
    max-width: 100%;
}

.footer a {
    color: black;
}

.footer .social a {
    display: inline-block;
}

.footer .social a img {
    width: 42px;
    height: 42px;
    border: none;
}

.footer .social a img:hover {
    transform: scale(1.1);
}

.footerfixed {
    position: fixed;
    left: 0;
    bottom: 0;
}

.menubar {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 5px 3px 5px 3px;
    border-bottom: 1px solid whitesmoke;
}

.bold {
    font-weight: bold;
}

.minitransparent {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 3px;
    border-bottom: 1px solid whitesmoke;
    border-top: 1px solid whitesmoke;
}

.minidarktransparent {
    background-color: rgba(255, 255, 255, 0.75);
    padding: 3px;
    border-bottom: 1px solid whitesmoke;
    border-top: 1px solid whitesmoke;
}

.minidarktransparentheaderfooter {
    background-color: rgba(190, 190, 190, 0.75);
    padding: 3px;
    border-bottom: 1px solid whitesmoke;
    border-top: 1px solid whitesmoke;
}

.nicEdit-main {
    background-color: rgba(255, 255, 255, 1);
}

.box {
    width: 600px;
    margin: 0 auto;
}

@font-face {
    font-family: IranSan;
    src: url("/public/fonts/IRANSansWeb.woff2") format("woff2"),
        url("/public/fonts/IRANSansWeb.woff") format("woff"),
        url("/public/fonts/IRANSansWeb.ttf") format("ttf");
}

@font-face {
    font-family: FA;
    src: url("/public/fonts/fa-solid-900.woff2") format("woff2"),
        url("/public/fonts/fa-solid-900.woff") format("woff"),
        url("/public/fonts/fa-solid-900.ttf") format("ttf");
}

* {
    font-family: IranSan, FA, Calibri, Tahoma !important;
    /*font-size: calc(12px + .1vw);*/
    /*font-size: 1em !important;*/
    /*font-size: 100%;*/
    /*vertical-align: middle;*/
    white-space: normal !important;
    word-wrap: break-word;
    word-break: normal;
    line-height: 1.5;
    height: auto;
    caret-color: maroon;
    text-shadow: 0 0 7px gray;
    /*size: auto;*/
}

.nicEdit-panel {
    float: right !important;
}

.fullpagebg {
    background-image: url("/public/uploads/site/header.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.fullpagebg:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    -webkit-filter: blur(5px);
    -o-filter: blur(5px);

    transition: all 2s linear;
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition: all 2s linear;
}

html {
    font-size: 13px;
}

.homepagebackground {
    background-image: url("/public/uploads/site/header.jpg");
    height: 100%;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5);
}

.mainbg {
    background-image: url("/public/uploads/site/bl_petstexture.png");
    background-repeat: repeat;
}

.bgblured {
    background-image: url("/public/uploads/site/bl_petstexture.png");
    background-repeat: repeat;
    background-color: white;
}

.login-page {
    background-repeat: repeat;
    background-color: darkkhaki;
}

.form-control {
    border: 1px solid #d1d4d7;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #3d3f42;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.activity .panel .panel-heading {
    line-height: 20px;
    height: 70px;
    padding-top: 15px;
}

.activity .panel .panel-heading img {
    height: 40px;
    margin: 0 15px 15px 0;
    float: left;
}

.activity .panel .panel-heading .small {
    color: #d1d4d7;
}

.activity .panel .panel-heading .pull-right {
    font-size: 16px;
    color: maroon;
    float: right !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
    border-radius: 10px;
    margin: 3px;
}

.activity .panel .panel-heading .pull-left {
    font-size: 12px;
    color: goldenrod;
    float: left !important;
}

.activity .panel .panel-heading .pull-right i {
    font-size: 14px;
}

.activity .panel .panel-body .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.activity .panel .panel-body .video-container iframe,
.activity .panel .panel-body .video-container object,
.activity .panel .panel-body .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

button.close {
    float: left !important;
}

.activity .panel .panel-body .actions {
    background: #f8f9fa;
    margin: 15px -15px 0 -15px;
    padding: 0 20px 0 10px;
    line-height: 50px;
    font-size: 12px;
}

.activity .panel .panel-body .actions .btn {
    font-size: 12px;
    text-decoration: none;
}

.activity .panel .panel-body .media-object {
    width: 30px;
}

.activity .panel .panel-body .media .media-body .media-heading {
    font-weight: 500;
}

.activity .panel .panel-body .media .media-body .small {
    color: #d1d4d7;
}

.activity .panel .panel-body .media .media-body p {
    margin-top: 10px;
    font-size: 12px;
}

img {
    max-height: 400px;
}

.autocomplete {
    text-align: right;
    direction: rtl;
    float: right;
    clear: both;
    position: absolute;
    z-index: 1030;
}

.nav-tabs > li {
    float: right !important;
}

.float-grid-columns {
    float: right !important;
}

.layout-fixed .main-sidebar {
    float: right !important;
    right: 0;
}

body:not(.sidebar-mini-md) .content-wrapper,
body:not(.sidebar-mini-md) .main-footer,
body:not(.sidebar-mini-md) .main-header {
    margin-right: 250px !important;
    margin-left: 0 !important;
}

.sidebar-mini.sidebar-collapse .content-wrapper,
.sidebar-mini.sidebar-collapse .main-footer,
.sidebar-mini.sidebar-collapse .main-header {
    margin-left: 0 !important;
    margin-right: 250px !important;
}

.sidebar-mini .nav-sidebar {
    padding: 0 !important;
}

.nav-link {
    padding: 0.5rem 0 0 1rem !important;
}

.tree-delete {
    color: red;
}

.tree-edit {
    color: green;
}

.add-root {
    color: darkorange;
}

.add-middlegen {
    color: #00bbf5;
}

.ribbon {
    margin: 0 !important;
    padding: 0 !important;
    background: rebeccapurple !important;
    color: white !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    transform: translateX(30%) translateY(0%) rotate(45deg) !important;
    transform-origin: top left !important;
}

.ribbon:before {
    right: 100%;
}

.ribbon:after {
    left: 100%;
}

.error {
    display: block;
    color: red;
    font-weight: bold;
    padding: 11px;
    border-bottom: 5px solid red;
    clear: both;
    position: relative;
}

.error:before {
    content: " خطا! ";
}

/* The Overlay (background) */
#overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    right: 0;
    top: 0;
    background-color: rgb(0, 0, 0); /* Black fallback color */
    background-color: rgba(0, 0, 0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    display: none;
    text-align: center;
    font-size: 3.5%;
    color: white;
    padding: 5% 0 0 0;
}

/* Position the content inside the overlay */
#overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
#overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
#overlay a:hover,
.overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
#overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    #overlay a {
        font-size: 20px;
    }

    #overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

input[type="text"]:optional,
input[type="number"]:optional,
textarea:optional {
    border-bottom: 5px solid greenyellow;
    background-color: rgba(255, 255, 255, 0.75) !important;
    height: auto;
}

textarea {
    resize: vertical !important;
    color: black;
    white-space: pre-wrap !important;
}

mark {
    font-size: 300%;
    border-bottom: 10px solid red;
    padding: 5px;
}

.login-page,
.register-page {
    direction: ltr !important;
}

.content {
    margin-top: 50px;
}

.marcenter {
    margin: 0 auto;
}

.titlenote {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    margin: auto;
    padding: 5px;
    height: 1.8em;
    clear: both;
}

.jumbotron:hover {
    opacity: 0.9;
}

.row {
    margin: 0 auto !important;
}

.homeimg {
    max-width: 256px !important;
    width: 100%;
    height: auto !important;
    margin: 0 auto;
    -webkit-filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5)) !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5, Color='#444')" !important;
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5, Color='#444')" !important;
}

.tcenter {
    margin: 0 auto;
    display: inline-block;
}

#searchbar {
    width: 100% !important;
}

/*#searchbar:hover {*/
/*    background: url("/public/uploads/site/ReturnToRoot.png") gold;*/
/*    background-repeat: repeat-x;*/
/*    background-position: center;*/
/*}*/

#myBtnBottomLeft {
    /*display: none; !* Hidden by default *!*/
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    left: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: purple; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 25px; /* Rounded corners */
    font-size: 13px; /* Increase font size */
    -webkit-backface-visibility: hidden;
    display: none;
}

#myBtnBottomLeft:hover {
    background-color: darkgoldenrod; /* Add a dark-grey background on hover */
}

#myBtnBottomRight {
    /*display: none; !* Hidden by default *!*/
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: purple; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 25px; /* Rounded corners */
    font-size: 13px; /* Increase font size */
    -webkit-backface-visibility: hidden;
    display: none;
}

#myBtnTopRight {
    /*display: none; !* Hidden by default *!*/
    position: fixed; /* Fixed/sticky position */
    top: 50px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: purple; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 25px; /* Rounded corners */
    font-size: 13px; /* Increase font size */
    -webkit-backface-visibility: hidden;
    display: none;
}

#myBtnTopLeft {
    /*display: none; !* Hidden by default *!*/
    position: fixed; /* Fixed/sticky position */
    top: 50px; /* Place the button at the bottom of the page */
    left: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: purple; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 25px; /* Rounded corners */
    font-size: 13px; /* Increase font size */
    -webkit-backface-visibility: hidden;
    display: none;
}

#myBtnBottomRight:hover,
#myBtnBottomLeft:hover,
#myBtnTopRight:hover,
#myBtnTopLeft:hover {
    background-color: darkgoldenrod; /* Add a dark-grey background on hover */
}

@media (min-width: 768px) {
    .navbar-nav > li {
        float: right !important;
    }
}

@media (max-width: 767px) /* The minimum width of the display area,
    such as a browser window*/ {
    .modal {
        top: auto;
        /*left: auto;*/
    }
}

@media only screen and (min-width: 1024px) {
    .modal-body {
        max-height: calc(100vh - 210px);
        overflow-y: auto;
    }
}

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: 1;
    width: 100%;
    display: inline-grid;
}

/*//////////////////*/
#PhotoModal {
    cursor: pointer;
}

#img01modal {
    object-fit: cover;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
    z-index: 1054;
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    height: auto;
    max-height: 100%;
}

.modal-content,
#caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

.vertical-alignment-helper {
    display: flex;
    height: 100%;
    width: 100%;
    pointer-events: none; /* This makes sure that we can still click outside of the modal to close it */
}

.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

input[type="checkbox"][disabled] + label {
    color: #ccc;
}

input[type="checkbox"],
input[type="radio"] {
    vertical-align: middle;
    position: relative;
    margin: auto;
}

.card-header {
    font-weight: bold;
}

#viewpageImage {
    background: rgba(255, 255, 255, 0.75);
    color: black;
    padding: 5px;
}

#viewpageImage > p {
    text-shadow: 0 0 0 transparent;
}

#viewpageImage > p > b {
    text-shadow: 0 0 20px goldenrod;
}

#viewpageImage:hover {
    background: rgba(255, 255, 255, 0);
    color: rgba(0, 0, 0, 0);
    text-shadow: 0 0 0 transparent !important;
}

.FixSearchBarToTheTopOfThePage {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: black;
    z-index: 999;
    background-image: none;
    color: whitesmoke;
    -webkit-backface-visibility: hidden;
}

#ShadowAnimation {
    border: 0 solid black;
    animation: ShadowAnimationEffect 5s infinite;
    border-radius: 90%;
}

@keyframes ShadowAnimationEffect {
    50% {
        text-shadow: 0 0 5px white;
        background-color: black;
    }
}

.bold {
    font-weight: bold;
}

/* for acknowledgement*/
.small-box {
    border-radius: 0.25rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
    display: block;
    margin-bottom: 20px;
    position: relative;
    background-color: transparent;
    color: black;
}

.small-box > .inner {
    padding: 10px;
}

.small-box > .small-box-footer {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(255, 255, 255, 0.8);
    display: block;
    padding: 3px 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 10;
}

.small-box > .small-box-footer:hover {
    background: rgba(0, 0, 0, 0.15);
    color: #ffffff;
}

.small-box h3 {
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0 0 10px 0;
    padding: 0;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .col-xl-2 .small-box h3,
    .col-lg-2 .small-box h3,
    .col-md-2 .small-box h3 {
        font-size: 1.6rem;
    }

    .col-xl-3 .small-box h3,
    .col-lg-3 .small-box h3,
    .col-md-3 .small-box h3 {
        font-size: 1.6rem;
    }
}

@media (min-width: 1200px) {
    .col-xl-2 .small-box h3,
    .col-lg-2 .small-box h3,
    .col-md-2 .small-box h3 {
        font-size: 2.2rem;
    }

    .col-xl-3 .small-box h3,
    .col-lg-3 .small-box h3,
    .col-md-3 .small-box h3 {
        font-size: 2.2rem;
    }
}

.small-box p {
    font-size: 1rem;
}

.small-box p > small {
    color: #f8f9fa;
    display: block;
    font-size: 0.9rem;
    margin-top: 5px;
}

.small-box h3,
.small-box p {
    z-index: 5;
}

.small-box .icon {
    color: rgba(0, 0, 0, 0.15);
    z-index: 0;
}

.small-box .icon > i {
    font-size: 90px;
    position: absolute;
    left: 15px;
    top: 15px;
    transition: all 0.3s linear;
}

.small-box .icon > i.fa,
.small-box .icon > i.fas,
.small-box .icon > i.far,
.small-box .icon > i.fab,
.small-box .icon > i.glyphicon,
.small-box .icon > i.ion {
    font-size: 70px;
    top: 20px;
}

.small-box:hover {
    text-decoration: none;
}

.small-box:hover .icon > i {
    font-size: 95px;
}

.small-box:hover .icon > i.fa,
.small-box:hover .icon > i.fas,
.small-box:hover .icon > i.far,
.small-box:hover .icon > i.fab,
.small-box:hover .icon > i.glyphicon,
.small-box:hover .icon > i.ion {
    font-size: 75px;
}

@media (max-width: 767.98px) {
    .small-box {
        text-align: center;
    }

    .small-box .icon {
        display: none;
    }

    .small-box p {
        font-size: 12px;
    }
}

#linkboxTable_length,
#linkboxTable_info {
    text-align: left;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* 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: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

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

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

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

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

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

.slider.round:before {
    border-radius: 50%;
}

.ui-autocomplete {
    position: absolute;
    z-index: 2150000000 !important;
    cursor: default;
    /*border: 2px solid #ccc;*/
    /*padding: 5px 0;*/
    border-radius: 5px;
    background-color: whitesmoke;
    list-style-type: none;
    /*padding: 0 5px 0 0;*/
}

.ui-menu .ui-menu-item {
    background: rgba(0, 255, 0, 0.2);
    border-radius: 5px;
    padding: 3px;
    border-bottom: 1px dashed grey;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ui-helper-hidden-accessible {
    display: none;
}

.wallimagemodal {
    padding: 10px 0 20px 0;
    box-shadow: 0 0 5px gray;
    border-radius: 10px;
    max-height: none !important;
    max-width: 100% !important;
    background-color: white;
}

.wallimagemodalclose {
    background-color: transparent;
    font-size: 350%;
    color: purple;
    font-weight: bold;
    padding: 25px 0 0 0;
    border: 0 solid transparent;
    text-shadow: none;
}

.homeicon {
    max-width: 100%;
}

.homeicon:hover {
    transform: scale(1.05);
    transition: transform 0.2s;
    z-index: 999;
}

.zoomin:hover {
    transform: scale(1.5);
    transition: transform 0.2s;
    z-index: 999;
}

.zoominsmall:hover {
    transform: scale(1.2);
    transition: transform 0.2s;
    z-index: 999;
}

.nextprev:hover {
    cursor: pointer;
    font-weight: bold !important;
}

.card-img-top {
    width: 100% !important;
    height: 15vw !important;
    object-fit: scale-down !important;
    margin: 0 auto;
    max-height: 200px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    border: 1px solid darkgray;
    text-align: center;
    color: black;
    direction: ltr;
}

.captchaerror {
    background-color: purple;
    color: white;
}

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

.slideshow-backgrond {
    background-image: url("/public/uploads/site/bl_petstexture.jpg");
    border-bottom: 10px solid gray;
    border-radius: 0 0 0 0 !important;
}

.slide {
    max-width: 100%;
    box-shadow: 0 0 1000px white;
    border-radius: 10px;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 15px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 3px 5px 5px 3px;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    left: 0;
    border-radius: 10px 0 0 10px;
}

.prev {
    right: 0;
    border-radius: 0 10px 10px 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(114, 14, 14, 0.8);
}

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: white;
    font-size: 14px;
    padding: 10px;
    position: absolute;
    font-weight: bold;
    background-color: rgba(81, 79, 79, 0.7);
    border-radius: 0 0 0 10px;
    bottom: 3px;
    left: 3px;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: black;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: darkslategray;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

.card-title {
    float: right !important;
}

input[required],
select[required],
textarea[required] {
    /*background-image: radial-gradient(goldenrod 15%, transparent 16%) !important;*/
    /*background-size: 1em 1em !important;*/
    /*background-position: top right !important;*/
    /*background-repeat: no-repeat !important;*/
    border-bottom: 5px solid gold !important;
}

textarea {
    resize: vertical;
}

textarea[required] {
    border-bottom: 5px solid gold;
}

input[type="text"]:optional:focus {
    border-bottom: 5px solid greenyellow;
}

textarea:optional:focus {
    border-bottom: 5px solid greenyellow;
}

input[name="q"]:optional {
    border-bottom: 1px solid rgb(209, 212, 215);
}

div[required] {
    color: maroon !important;
    font-weight: bold;
    direction: rtl;
}

.box {
    width: 600px;
    margin: 0 auto;
}

.btn-xs {
    padding: 4px !important;
    line-height: normal;
    border-radius: 5px;
    display: inline-block;
}

body {
    background: #eee;
    direction: rtl;
    text-align: right;
    display: inline-block;
}

.form-control {
    border: 1px solid #d1d4d7;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #3d3f42;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.activity .panel .panel-heading {
    line-height: 20px;
    height: 70px;
    padding-top: 15px;
}

.activity .panel .panel-heading img {
    height: 40px;
    margin: 0 15px 15px 0;
    float: left;
}

.activity .panel .panel-heading .small {
    color: #d1d4d7;
}

.activity .panel .panel-heading .pull-right {
    font-size: 16px;
    color: maroon;
    float: right !important;
}

.activity .panel .panel-heading .pull-left {
    font-size: 12px;
    color: goldenrod;
    float: left !important;
}

.activity .panel .panel-heading .pull-right i {
    font-size: 14px;
}

.activity .panel .panel-body .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.activity .panel .panel-body .video-container iframe,
.activity .panel .panel-body .video-container object,
.activity .panel .panel-body .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

button.close {
    float: left !important;
}

.activity .panel .panel-body .actions {
    background: #f8f9fa;
    margin: 15px -15px 0 -15px;
    padding: 0 20px 0 10px;
    line-height: 50px;
    font-size: 12px;
}

.activity .panel .panel-body .actions .btn {
    font-size: 12px;
    text-decoration: none;
}

.activity .panel .panel-body .media-object {
    width: 30px;
}

.activity .panel .panel-body .media .media-body .media-heading {
    font-weight: 500;
}

.activity .panel .panel-body .media .media-body .small {
    color: #d1d4d7;
}

.activity .panel .panel-body .media .media-body p {
    margin-top: 10px;
    font-size: 12px;
}

img {
    max-height: 400px;
}

.autocomplete {
    text-align: right;
    direction: rtl;
    float: right;
    clear: both;
    position: absolute;
}

.nav-tabs > li {
    float: right !important;
}

.float-grid-columns {
    float: right !important;
}

#overlay {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    text-align: center;
    font-weight: bold;
    font-size: 3.5vw;
    color: white;
    padding: 25%;
}

.dropdown {
    margin-right: 5px;
    width: auto;
    display: inline-block !important;
}

.dropdown-menu > li > a:hover {
    background-color: whitesmoke;
    transform: scale(1.3);
    transition: transform 0.1s;
    border-radius: 5px;
    border: 1px solid lightgrey;
}

.layout-fixed .main-sidebar {
    float: right !important;
    right: 0;
}

.sidebar-mini .nav-sidebar {
    padding: 0 !important;
}

.nav-link {
    padding: 0.5rem 0 0 1rem !important;
}

.tree-delete {
    color: red;
}

.tree-edit {
    color: green;
}

.add-root {
    color: darkorange;
}

.ribbon {
    margin: 0 !important;
    background: rebeccapurple !important;
    color: white !important;
    padding: 1em 0 !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    transform: translateX(30%) translateY(0%) rotate(45deg) !important;
    transform-origin: top left !important;
}

.ribbon:before {
    right: 100%;
}

.ribbon:after {
    left: 100%;
}

.error {
    display: block;
    color: red;
    font-weight: bold;
    padding: 11px;
    border-bottom: 5px solid red;
    clear: both;
    position: relative;
}

.error:before {
    content: " خطا! ";
}

div.dataTables_wrapper div.dataTables_filter label {
    float: left;
    direction: rtl;
    text-align: right;
}

.custom-control-label::before,
.custom-file-label,
.custom-select {
    text-align: center;
    font-weight: bold;
}

.btn-secondary:active {
    color: white !important;
}

.clear {
    clear: both;
}

.image-cropper {
    /*width: 42px;*/
    /*height: 42px;*/
    /*position: relative;*/
    /*overflow: auto;*/
    /*border-radius: 50%;*/
}

.ribonBargold {
    background-color: #ffc107;
    color: black;
    padding: 5px;
    width: 98%;
    border-radius: 5px;
    box-shadow: 0 0 5px gray;
}

.ribonBargreen {
    background-color: #3dff07;
    color: black;
    padding: 5px;
    width: 98%;
    border-radius: 5px;
    box-shadow: 0 0 5px gray;
}

.notificationBubble {
    top: -10px;
    right: -10px;
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: black;
    border: 1px solid black;
    color: white;
    text-align: center;
    vertical-align: middle;
    box-shadow: 0 0 3px white;
}

.notificationred {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: black;
    border: 1px solid black;
    color: white;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    box-shadow: 0 0 3px white;
}

.small-box {
    box-shadow: 0 0 3px grey !important;
}

input[type="checkbox"][disabled] + label {
    color: #ccc;
}

.a2a_default_style a {
    float: right !important;
    line-break: anywhere !important;
    word-break: break-all !important;
}

.speech-bubbleMe {
    float: right;
    clear: both;
    position: relative;
    background: #00aabb;
    border-radius: 0.4em;
    max-width: 350px;
    width: 100%;
    padding: 60px 20px;
    margin: 1em 0 0 0;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 200%;
    text-shadow: 0 -0.05em 0.1em rgba(0, 0, 0, 0.3);
}

.speech-bubbleMe:after {
    content: "";
    position: absolute;
    top: 0;
    left: 75%;
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-bottom-color: #00aabb;
    border-top: 0;
    border-right: 0;
    margin-left: -7px;
    margin-top: -14px;
}

.speech-bubbleYou {
    float: left;
    clear: both;
    position: relative;
    background: #6ecd0e;
    border-radius: 0.4em;
    max-width: 350px;
    width: 100%;
    padding: 60px 20px;
    margin: 1em 0 0 0;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 200%;
    text-shadow: 0 -0.05em 0.1em rgba(0, 0, 0, 0.3);
}

.speech-bubbleYou:after {
    content: "";
    position: absolute;
    top: 0;
    left: 25%;
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-bottom-color: #6ecd0e;
    border-top: 0;
    border-left: 0;
    margin-left: -7px;
    margin-top: -14px;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    word-break: break-word;
    line-height: normal;
}

.fa,
.fab,
.fad,
.fal,
.far,
.fas {
    line-height: normal;
}

h1 {
    font-size: 1.7rem;
    font-weight: bold !important;
}

h2 {
    font-size: 1.5rem;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* 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: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

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

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

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

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

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

.slider.round:before {
    border-radius: 50%;
}

.progress {
    position: relative;
    width: 150px;
    height: 30px;
    margin: 0 15px 0 15px;
    border-radius: 5px;
}

.bar {
    background-color: #027c3d;
    width: 0%;
    height: 100%;
}

.percent {
    position: absolute;
    display: inline-block;
    left: 45%;
    top: auto;
    font-size: 20px;
    color: #040608;
}

.cover-cardGallery {
    border: 2px solid white;
    background: silver;
    padding: 0;
    margin: 0;
    height: 200px;
}

.cover-cardGallery > p {
    text-align: center;
    background-color: rgba(6, 6, 6, 0);
    color: rgba(6, 6, 6, 0);
    width: 100%;
    height: 100%;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 0 0 0 transparent;
    z-index: 999;
}

.cover-cardGallery > p > span {
    text-shadow: 0 0 0 transparent;
    z-index: 999;
}

.cover-cardGallery:hover > p {
    background-color: rgba(6, 6, 6, 0.3);
    color: white;
    text-shadow: 3px 3px 10px #000;
}

#networktext {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    margin: auto auto auto auto;
    font-size: 22px;
    z-index: 999;
    background-color: teal;
    border-radius: 10px;
    color: #000000;
    padding: 10px;
}

.cover-cardGallery:hover {
    transform: scale(1.05);
    transition: transform 0.2s;
    background-color: white;
    z-index: 999;
}

.galleryicons {
    position: relative;
    bottom: 48px;
    width: 100%;
    opacity: 0.8;
    background-color: gray;
    height: 35px;
}

div.dataTables_wrapper div.dataTables_length select {
    min-width: 40px;
}

.rapStar {
    color: white;
    cursor: pointer;
    font-size: 32px;
    position: relative;
    text-shadow: 0 0 8px black;
    margin: 0 auto;
    display: table;
    clear: both;
    overflow: hidden;
    direction: ltr;
}

.rapStarFront {
    top: 0;
    color: #ffff00;
    display: flex;
    overflow: hidden;
    position: absolute;
    z-index: 1;
}

.rapStarDisable {
    cursor: default;
}

.rapStar > span {
    text-shadow: 0 0 1px gray;
    color: gray;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: inline-block;
        display: contents !important;
        /*padding: 10px;*/
    }

    .topnav:not(.responsive) > li {
        display: none !important;
        list-style: none;
    }

    .topnav > form > input {
        border: 2px solid #28a745 !important;
        box-shadow: 0 0 10px #28a745;
    }

    .topnav > form > input {
        min-width: calc(100% - 82px) !important;
        max-width: calc(100% - 82px) !important;
    }

    .card-img-top {
        width: 100% !important;
        max-width: 95%;
        object-fit: scale-down !important;
        margin: 0 auto;
        height: 100% !important;
    }

    .topsearchbar {
        /*margin: 10px 5px;*/
        width: calc(100% - 70px) !important;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .topnav.responsive > li,
    .topnav.responsive > a {
        display: inline-block;
        width: 100%;
        width: calc(100% - 10px);
        margin: 5px;
    }

    .topnav.responsive a.icon {
        display: contents;
        width: auto;
    }

    .topnav.responsive a:not(.image-cropper) {
        float: none;
        display: inline-block;
    }

    .topnav.responsive > a {
        /*border-bottom: 2px dotted whitesmoke;*/
    }

    .dropdown-menu {
        /*transform: translateX(0px) !important;*/
        min-width: 100% !important;
        max-width: 100%;
    }

    .topnav.responsive li a {
        width: 100%;
    }

    .dropdown-menu > li > a:hover {
        transform: none;
    }

    .topnav.responsive > form > input {
        min-width: calc(100% - 82px) !important;
        max-width: calc(100% - 81px) !important;
    }
}

.deleteimageicon {
    position: absolute;
    top: -10px;
    right: -10px;
    border: 5px solid red;
    border-radius: 5px;
    padding: 10px;
    z-index: 1040;
    color: orangered;
    background-color: black;
    cursor: pointer;
    max-width: 55px;
}

#like,
#dislike {
    cursor: pointer;
}

#like > span,
#dislike > span {
    text-shadow: 0 0 1px white;
}

#like > li {
    text-shadow: 0 0 1px white;
    padding: 0 5px 0 0;
}

#dislike > li {
    text-shadow: 0 0 1px white;
    padding: 0 0 0 5px;
}

.likedislike {
    background-color: rgb(0, 0, 0);
    border-radius: 0;
    color: white;
}

#messagelikedislike {
    color: white;
    font-weight: bold;
}

delete {
    color: orange;
    font-weight: bold;
    text-decoration: line-through;
}

insert {
    color: darkgreen;
    font-weight: bold;
}

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .fullpagebg {
        background-attachment: scroll;
    }
}

@media screen and (max-width: 520px) {
    li.page-item {
        display: none;
    }

    .page-item:first-child,
    .page-item:last-child,
    .page-item.active {
        display: block;
    }
}

.activitychart {
    display: inline;
    max-width: 100%;
    max-height: 250px;
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 575px) {
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9 {
        float: right;
    }
}

@media (min-width: 768px) {
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9 {
        float: right;
    }
}

@media (min-width: 1200px) {
    .col-lg-1,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9 {
        float: right;
    }
}

/*----------------------------------*/
.splitter {
    width: 100%;
    background-color: goldenrod;
    color: white;
    padding: 7px;
    font-weight: bold;
    margin: 10px 0 10px 0;
    border-radius: 5px 5px 1px 1px;
}

.splitter2 {
    width: 100%;
    background-color: cornflowerblue;
    color: white;
    padding: 7px;
    font-weight: bold;
    margin: 10px 0 10px 0;
    border-radius: 5px 5px 1px 1px;
}

.splitter2close {
    width: 100%;
    background-color: cornflowerblue;
    padding: 7px;
    color: white;
    font-weight: bold;
    margin: 0 0 10px 0;
    border-radius: 1px 1px 5px 5px;
}

.myinput {
    padding: 10px;
    border-bottom: 1px dashed lightgray;
    border-radius: 5px;
    font-size: 105%;
    margin: 3px;
    border: 1px solid whitesmoke;
}

.myinput:hover {
    background-color: lightgray !important;
    border-right: 10px solid goldenrod;
    border-left: 10px solid goldenrod;
}

.myinputempty {
    padding: 10px;
    font-weight: bold;
    color: maroon;
    background-color: white;
    border-radius: 0 0 5px 5px;
    border: 1px solid lightslategray;
}

.myinputempty:hover {
    background-color: lightgray !important;
}

.topnote {
    color: white;
    font-size: large;
    width: 100%;
    padding: 10px 5px 10px 5px;
    background-color: cornflowerblue;
    border-radius: 0 0 5px 5px;
}

.textcenter {
    text-align: center;
}

.entered {
    font-weight: bold;
    color: maroon;
}

.notentered {
    font-weight: bold;
    color: orangered;
}

.notentered:after {
    content: "]";
}

.notentered:before {
    content: "[";
}

#phone,
#email,
#mobile,
#birthday,
#birthmonth,
#birthyear,
#certification_id,
#national_id,
#bell,
#number,
#postcode,
#web,
#url,
#instagram,
#website,
#ipaddress,
#password_confirmation,
#password-confirm,
input[type="password"],
input[type="password_confirmation"],
input[type="email"],
#phone-flexdatalist,
#email-flexdatalist {
    direction: ltr !important;
    text-align: center !important;
}

#map {
    width: 100%;
    height: 400px;
}

.pac-item {
    text-align: right;
}

.collapsible {
    background-color: teal;
    color: white;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: right;
    font-weight: bold;
    outline: none;
    font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
    background-color: #005a5a;
}

#inputform {
    display: none;
}

.assetSummaryClass,
.memberSummaryClass {
    background-color: khaki;
    padding: 10px;
    border-radius: 5px;
    min-height: 250px;
}

.middleSummaryClass {
    text-align: center;
    padding: 10px;
    /*min-height: 250px;*/
}

.mainSummaryClass {
    padding: 10px;
    border: 1px solid gray;
    border-radius: 5px 5px 0 0;
    max-width: 100%;
}

.more {
    background-color: rgba(225, 225, 225, 0.5);
    border-right: 1px solid ghostwhite;
    border-left: 1px solid ghostwhite;
    border-bottom: 1px solid ghostwhite;
    border-radius: 0 0 5px 5px;
    padding: 5px;
    width: 100%;
}

.more:before {
    content: "❖ توضیحات تکمیلی: ";
    font-weight: bold;
}

.SummaryError {
    width: 100%;
    background-color: orangered;
    color: black;
    padding: 5px;
    font-weight: bold;
    display: none;
    border-radius: 0 0 5px 5px;
}

.myprogress {
    width: 100%;
    height: 19px;
    border-radius: 3px;
    background-color: white;
    border: 1px solid darkkhaki;
    margin: 2px 3px 5px 2px;
    padding: 0 1px 0 1px;
}

.myprogress:hover {
    /*transform: scale(1.5);*/
}

.bartext {
    position: absolute;
    font-size: 12px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    background-color: transparent;
    text-shadow: 0 0 1px white;
}

.mybar {
    height: 100%;
    background-color: gold;
    border-left: 3px solid limegreen;
    border-radius: 3px;
    font-size: 1vh;
}

.myzerobar {
    height: 100%;
    background-color: orangered;
    border-radius: 3px;
    font-size: 1vh;
    width: 100%;
}

#subheaderinfo {
    border-radius: 0 0 3px 3px;
    border: 1px solid black;
    display: none;
}

.subheader {
    border-radius: 0 0 3px 3px;
    border: 1px solid black;
}

.noresultfound {
    max-width: 100%;
    border-radius: 10px;
    margin: 10px 0 10px 0;
}

#notebook-paper {
    width: 95%;
    min-height: 450px;
    background: linear-gradient(
        to bottom,
        rgba(239, 239, 239, 0.5) 20px,
        #b1e5ff 1px
    );
    margin: 10px auto;
    background-size: 100% 21px;
    padding-top: 150px;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
    border-radius: 5px;
    -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2),
        0 0 6px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.willbg {
    background-image: url("/public/uploads/site/bl_petstexture.png");
    background-repeat: repeat;
}

.bgwhite {
    background-color: rgba(239, 239, 239, 0.5);
}

#create > select {
    background-color: khaki;
}

#create > label {
    font-weight: bold;
}

.persianlettervalue {
    margin-top: 0;
    background-color: khaki;
    border-radius: 0 0 5px 5px;
    padding: 5px;
    border-bottom: 1px solid #acacac;
    border-right: 1px solid #acacac;
    border-left: 1px solid #acacac;
    color: black;
}

.barcode {
    max-width: 150px;
    max-height: 150px;
    border: 2px solid black;
    padding: 2px;
}

.fingerprint {
    width: 200px;
    height: 200px;
    display: inline-block;
    border: 2px dashed black;
    margin-bottom: 10px;
}

.fingerprint:before {
    content: "محل ثبت اثر انگشت مالک وصیت نامه";
    font-size: smaller;
    border-bottom: 1px solid darkgrey;
}

.signature {
    max-width: 300px;
    width: 100%;
    height: 200px;
    display: inline-block;
    border: 2px dashed black;
    margin-bottom: 10px;
}

.signature:before {
    content: "محل ثبت امضای مالک وصیت نامه";
    font-size: smaller;
    border-bottom: 1px solid darkgrey;
}

.executorsummaryul {
    list-style: square;
}

.tickborder {
    border: 10px solid maroon !important;
    border-radius: 15px !important;
}

.thinborder {
    border: 1px dotted black !important;
    border-radius: 1px !important;
    padding: 5px;
}

.commentbackground {
    background-color: black;
    color: white !important;
    padding: 5px;
    border-radius: 2px;
    border-right: 10px solid darkgoldenrod;
}

.backgroundstrip {
    background-color: gold !important;
}

.assignmentstable {
    font-size: small;
    margin-top: 0;
}

.tcell,
.assignmenttablesheadercells {
    text-align: center;
}

.assignmenttableheader {
    background-color: goldenrod;
    border-top: 1px solid whitesmoke;
}

.assignmenttablerow:hover {
    background-color: darkgoldenrod !important;
}

#assignmenttablediv {
    display: inline-block;
    width: 100%;
}

#assignmentstableh5 {
    display: inline-block !important;
}

.bergermenu {
    padding: 10px 10px 6px 10px;
    color: black;
}

blockquote {
    background: gold;
    border: 1px solid #76848c;
    border-right-width: 10px;
    margin: 10px;
    padding: 10px;
    border-radius: 5px 2px 2px 5px;
}

.collapsibleletter {
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: right;
    outline: none;
    border-radius: 5px;
    margin-top: 10px;
}

.collapsibleletter:before {
    content: "❏";
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    color: black;
}

.collapsibleactive {
    border: 1px solid black;
    box-shadow: 0 0 10px #989696;
    border-radius: 15px 15px 0 0;
    outline: none;
}

.collapsibleletter:hover {
    /*background-color: goldenrod;*/
    border-color: black;
    border: 1px solid ghostwhite;
    box-shadow: 0 0 10px #989696;
}

.contentletter {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    outline: none;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
    margin: 3px 0 0 0;
    box-shadow: 0 0 10px #989696;
    border-radius: 0 0 15px 15px;
}

#toperrormessage,
#toperrormessagelogin,
#toperrormessagetop {
    max-width: 100%;
    width: 100%;
    text-align: center;
    color: white;
    padding: 10px;
    display: none;
    border-radius: 0 0 5px 5px;
    border: 1px solid lightgrey;
}

.postmiddleads {
    padding: 15px 10px 15px 10px;
    margin: 5px 10px 5px 10px;
    background-color: blueviolet;
    color: white;
    font-size: medium;
    width: 98%;
    max-width: 100%;
    border: 1px solid #76848c;
    border-radius: 5px 2px 2px 5px;
    border-right: 10px solid #76848c;
    display: inline-block;
    text-align: right;
    text-shadow: 0 0 3px black;
}

.postmiddleads:hover {
    background-color: black;
    color: white !important;
}

.postmiddleads:visited {
    color: white;
}

.remindermessage,
.remindermessage:visited {
    color: white;
}

.contacticons:hover {
    transform: scale(1.5);
    transition: transform 0.2s;
}

.logobar {
    padding: 10px 20px 3px 35px;
    margin-top: 20px;
    width: 290px;
    max-width: 100%;
    border-radius: 50px 0 0 0;
    background-color: rgba(190, 190, 190, 0.75);
    border-top: 1px solid #f5f5f5;
    position: relative;
    top: -1px;
}

button.close * {
    font-size: x-large;
}

#imagepreview {
    padding: 10px;
}

input,
select {
    max-width: 100%;
}

.relatedarticles:hover {
    background-color: rgba(255, 255, 255, 0.7) !important;
}

.relatedarticlesurl,
.relatedarticlestitle {
    color: darkslategrey;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
}

progress {
    height: 5px;
    margin: 10px 2% 10px 2%;
    max-width: 95%;
    width: 100%;
}

.form-control[required]:focus {
    border-color: gold;
}

.form-control[optiona]:focus {
    border-color: #adff2f;
}

.login-card-body
    .input-group
    .form-control:focus
    ~ .input-group-append
    .input-group-text,
.register-card-body
    .input-group
    .form-control:focus
    ~ .input-group-append
    .input-group-text {
    color: black;
    border-color: gold;
}

.login-card-body .input-group .form-control,
.register-card-body .input-group .form-control {
    border-left: 1px solid #ced4da;
    border-right: 0 solid #ced4da;
    border-top: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    border-radius: 5px 0 0 5px;
}

.input-group-append {
    border-right: 1px solid #ced4da;
    border-radius: 0 5px 05px 0;
}

.input-group-text {
    border-bottom: 5px solid gold;
    border-radius: 5px 0 0 5px;
    border-left: 0 solid #ced4da;
    border-top: 1px solid #ced4da;
}

.simditor-toolbar {
    z-index: 1060 !important;
}

.showmore {
    font-size: x-small;
    color: maroon;
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
    width: 100%;
    border: 1px solid whitesmoke;
    border-radius: 0 0 25px 25px;
}

.showmorediv {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
}

.commentblock {
    margin-top: 0;
    border-radius: 0 0 5px 5px;
    background-color: teal;
    color: white;
}

.questionsubtitle {
    font-size: small;
    color: white;
    border-radius: 5px 5px 0 0;
    background-color: darkgoldenrod;
    width: 100%;

    padding: 7px;
    font-weight: bold;
}

.questionsubtitle > li {
    /*color: crimson;*/
}

.QANDA textarea {
    border-radius: 5px;
    margin-top: 5px;
}

.QuestionsLayout a {
    color: inherit;
    font-weight: 900;
    text-shadow: 0 0 5px lightgrey;
}

.question-comment:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: black !important;
    /*border-color: lightgrey;*/
    opacity: 1;
}

.answer-comment:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: black !important;
    /*border-color: lightgrey;*/
    opacity: 1;
}

.question-comment,
.answer-comment {
    font-size: small;
    border-radius: 3px;
    opacity: 0.6;
}

.answercontainer,
.questioncontainer {
    border-right: 1px solid whitesmoke;
    border-left: 1px solid whitesmoke;
}

.qandalikedislikemessage {
    font-size: x-small;
    font-weight: bold;
    color: white;
    background-color: teal;
    padding: 3px;
    border-radius: 3px 3px 0 0;
    margin: -4px;
    display: none;
}

.splitter3 {
    width: 100%;
    background-color: goldenrod;
    color: white;
    padding: 7px;
    font-weight: bold;
    margin: 10px 0 10px 0;
    border-radius: 5px 5px 1px 1px;
}

.splitter4 {
    width: 100%;
    background-color: teal;
    color: white;
    padding: 7px;
    font-weight: bold;
    margin: 10px 0 10px 0;
    border-radius: 5px 5px 1px 1px;
}

@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.2, 1.2);
    }
    100% {
        transform: scale(1, 1);
    }
}

.mainlogoeffect {
    animation: zoominoutsinglefeatured 1s 2;
}

.dropdown-menu {
    width: max-content;
    padding: 0;
    min-width: 325px;
    right: 0 !important;
}

.dropdown-menusmall {
    min-width: 190px;
}

.dropdown-menumedium {
    min-width: 275px;
}

.dropdown-menularge {
    min-width: 325px;
}

.cetertext2div {
    text-align: center;
    margin: 50px 0 50px 0;
    width: 100%;
}

.VideoImageWatermark:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    left: calc(100% - 88px);
    background-image: url("/public/uploads/site/pwatermark.png");
    background-size: 68px 68px;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    opacity: 1;
}

.dtr-control:before {
    height: 30px !important;
    width: 30px !important;
    border-radius: 50% !important;
    line-height: 30px !important;
    font-size: 30px;
    font-weight: bold;
    background-color: #029a02 !important;
    margin: 0 !important;
    padding: 0 !important;
    top: 50% !important;
    top: calc(50% - (32px / 2)) !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th.dtr-control {
    padding-left: 45px;
}

.emojiclose {
    max-width: 15%;
    padding: 2%;
    margin: 1% 1% 2% 1%;
    text-align: center;
    display: block;
    font-weight: bold;
    color: white;
    border-radius: 3px;
    cursor: pointer;
    background-color: crimson;
}

.emojiclose span {
    font-size: 15px;
    font-weight: bold;
    color: white;
    text-shadow: inherit;
}

.emojiclose:hover {
    box-shadow: 0 0 3px rgba(220, 20, 60, 0.7);
    text-shadow: 0 0 3px whitesmoke;
}

.notificationblack {
    border-radius: 50%;
    width: 15px;
    height: 15px;
    font-size: 13px;
    background: black;
    border: 1px solid white;
    box-shadow: 0 0 9px black;
    color: white;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    line-height: 14px;
}

.notificationBubbleBlack {
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: black;
    border: 1px solid white;
    box-shadow: 0 0 9px black;
    color: white;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    line-height: 18px;
}

.autobreak {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

@media (max-width: 550px) {
    .socialbuttonstag {
        max-width: 187px;
    }

    .socialbuttonstag img {
        margin-bottom: 5px;
    }
}

.socialbuttonstag {
    direction: ltr;
    display: inline-block;
}

.guidesection a {
    color: khaki;
}

.col-sm-12 {
    width: 100%;
}

arabicFletter {
    color: maroon;
    font-weight: bold;
}

.emojichooserclick {
    background-color: lightgrey;
    border-radius: 5px;
    transform: scale(1.5);
    transition-duration: 100ms;
    box-shadow: 0 0 1px black;
}

button * {
    vertical-align: middle;
}

.willlinktopmenu {
    background-color: gold;
    text-align: center;
    font-size: 120%;
    border: 1px solid gray;
    margin: 4px;
    font-weight: bold;
}

@media (max-width: 800px) {
    .table {
        width: 100%;
        table-layout: fixed;
    }

    .table th,
    .table td {
        overflow-wrap: break-word;
    }
}

.fas {
    font-weight: normal;
}