@font-face {
    font-family: 'IRANSans';
    src: url('../fonts/IRANSansWeb.eot') format('eot'),
    /* IE6–8 */
    url('../fonts/IRANSansWeb.woff') format('woff'),
    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/IRANSansWeb.ttf') format('truetype');
    /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

:root {
    --black_03: #333;
    --gold: #A98F71;
}

.row{
    margin: 0 !important;
}

.font-iranSans {
    font-family: iranSans;
}
.pointer{
    cursor:pointer;
}
* {
    transition: 0.3s;
}
.hidden {
    display:none;
}

.H-divider {
    position: relative;
    width: 100%;
    background-image: radial-gradient(#A98F71,#fff,#A98F71);
    height: 1px;
    margin: 2vh 0;
}
    .H-divider.up {
        margin: 2vh 0 0 0;
    }
    .H-divider.down {
        margin: 0 0 2vh 0;
    }
    .H-divider.between {
        margin: 1vh 0;
    }
    .H-divider.between:not(.verticalMode) {
        display:none;
    }

.test {
    border: dashed 1px #555;
}

/* body */

body {
    padding: 13vh 0vw 0vh 0vw;
}
body.verticalMode {
    padding: 10vh 0vw 0vh 0vw;
}
    body.NightLightMode {
        background-color: #333;
    }
    body::-webkit-scrollbar {
        width: 0.5vw; /* width of the entire scrollbar */
    }
    body.verticalMode::-webkit-scrollbar {
        width: 1vw; /* width of the entire scrollbar */
    }
    body::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.1); /* color of the tracking area */
    }
    body::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.2); /* color of the scroll thumb */
        border-radius: 5px; /* roundness of the scroll thumb */
        border: 1vw solid gray; /* creates padding around scroll thumb */
    }
    body.verticalMode::-webkit-scrollbar-thumb {
        border: 2vw solid gray; /* creates padding around scroll thumb */
    }
body{
    scroll-behavior:smooth;
    overflow-x:hidden;
}
.info {
    position: fixed;
    top: 1vh;
    left: 2vh;
    font-size: 1vh;
    z-index: 10000;
}
.text-bolder{
    font-weight:bolder !important;
}
/* colors */
.white {
    fill: #fff;
}
.black_3 {
    fill: #333;
}
    .black_3.NightLightMode {
        fill: #fff;
    }
    .NightLightMode .black_3 {
        fill: #fff;
    }
.gold {
    fill: #A98F71
}

.blue {
    fill: #4A87D9
}



/* bar */

.bar {
    position: fixed;
    background-color: #fff;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100vw;
    height: 8vh;
    border-bottom:solid 1px #0005;
}
.bar.NightLightMode{
    background-color:#333;
}

.logo-bar{
    position:fixed;
    top:1vh;
    height:6vh;
}
    .logo-bar.RTLDirection {
        right: 1vw;
    }
        .logo-bar.RTLDirection.verticalMode {
            right: 4vw;
        }
    .logo-bar.LTRDirection {
        left: 1vw;
    }
        .logo-bar.LTRDirection.verticalMode {
            left: 4vw;
        }
.logo-bar.logo-bar-LTR.RTLDirection {
    display: none;
}
.logo-bar.logo-bar-RTL.LTRDirection {
    display: none;
}

.sidebar {
    position: fixed;
    top: 1.5vh;
    color: #555;
    background-color: #5550;
    font-size: 3vh !important; 
    padding: 0 1vh;
    transform: rotate(90deg);
    font-weight: bolder;
    border-radius: 1vh;
}
    .sidebar.RTLDirection {
        left: 1vw;
    }
        .sidebar.RTLDirection.verticalMode {
            left: 3vw;
        }
    .sidebar.LTRDirection {
        right: 1vw;
    }
        .sidebar.LTRDirection.verticalMode {
            right: 3vw;
        }
    .sidebar:hover{
        background-color:#555f;
        color:#fff;
    }

#sidebarBaseContainer {
    position: fixed;
    top: 0;
    width:100vw;
    height:100vh;
    z-index:1000;
}
    #sidebarBaseContainer.RTLDirection {
        background-image: linear-gradient(to left,#5550,#555);
        left: -100vw;
    }
    #sidebarBaseContainer.RTLDirection.active {
        left: 0;
    }
    #sidebarBaseContainer.LTRDirection {
        background-image: linear-gradient(to right,#5550,#555);
        right: -100vw;
    }
    #sidebarBaseContainer.LTRDirection.active {
        right: 0;
    }
#sidebarBaseContainerCloser{
    position:absolute;
    top:0;
    width:60vw;
    height:100vh;
    z-index:1001;
}
    #sidebarBaseContainerCloser.verticalMode {
        width: 20vw;
    }

    #sidebarBaseContainerCloser.RTLDirection {
        right: 0;
    }

    #sidebarBaseContainerCloser.LTRDirection {
        left: 0;
    }
#sidebarContainer {
    position: absolute;
    top: 0;
    width: 40vw;
    background-color: #bbbbbbe3;
    height: 100vh;
    z-index: 1001;
}
    #sidebarContainer.verticalMode {
        width: 80vw;
    }
    #sidebarContainer.RTLDirection {
        left: 0;
    }
    #sidebarContainer.LTRDirection {
        right: 0;
    }
.sidebarMenuContainer{
    position:relative;
    width:100%;
    padding:0;
}
.sidebarMainIconContainer {
    position: relative;
    top: 0;
    width: 100%;
    height: 8vh;
    z-index:1003
}
.sidebarMainIconContainer .col-4 {
    position: relative;
    top: 0;
    padding:0;
    height: 100%;
}
.sidebarIconItem {
    top: 0;
    height: 100%;
    background-color: #555;
    text-align: center;
    padding:5px;
    margin-bottom:1px;
    font-size:3.7vh;
    font-weight:bolder;
}
.UserLogin .sidebarIconItem {
    background-color: #ccc;
}
.UserLogin:hover .black_3 {
    fill: #ccc;
}
.LanguageSelection .sidebarIconItem {
    background-color: #aaa;
}
.ThemeModeSelection .sidebarIconItem {
    background-color: #444;
}
.sidebarIconItem:hover {
    background-color: #333;
    color:#fff;
}


.sidebarMenuItem {
    position: relative;
    padding: 2vh;
    font-size: 2vh;
    width: 100%;
    background-color: #5559;
    text-align: center;
    margin: 1px 0 0 0;
}
    .sidebarMenuItem.effective {
        background-color: #5553;
    }
.sidebarMenuItem:hover {
    background-color: #333;
    color: #fff;
    font-weight: bolder;
}

/* RTL / LTR On Responsive Text */
.responsive:not(.verticalMode) {
    font-size: 2vh;
}

.responsive.verticalMode {
    font-size: 2vw;
}
.responsive:not(.verticalMode) .text-bolder {
    font-size: 2.5vh;
}

.responsive.verticalMode .text-bolder {
    font-size: 3.0vw;
}
/*.languageSelectorContainer{
position:fixed;
z-index:1000;
top:0;
left:0;
width:100vw;
height:100vh;
background-color:#fff;
}

.languageKeyContainer {
position: fixed;
width: 2.5vh;
height: 2.5vh;
font-size: 1.5vh;
line-height: 1.5vh;
text-align: center;
top: 1.0vh;
border-radius: 0.5vh;
font-weight: bold;
color: #333;
background-color: #3332;
border: solid 1px #3335;
}
.languageKeyContainer.NightLightMode{
color:#fff;
background-color:#fff2;
border: solid 1px #fff5;
}

.languageKeyContainer.RTLDirection {
right: 1vw;
}
.languageKeyContainer.RTLDirection.verticalMode {
    right: 3vw;
}
.languageKeyContainer.LTRDirection {
left: 1vw;
}
.languageKeyContainer.LTRDirection.verticalMode {
    left: 3vw;
}

.languageKeyContainer.verticalMode {
top: 1vh;
line-height: 1.8vh;
border: solid 1px #fff5;
}

.languageKeyContainer span {
display: inline-block;
vertical-align: middle;
line-height: 1vh;
}

.LightModeKeyContainer{
position:fixed;
top:3.5vh;
width:2.5vh;
height:2.5vh;
}
.LightModeKeyContainer.RTLDirection {
right: 1vw;
}
.LightModeKeyContainer.RTLDirection.verticalMode {
    right: 3vw;
}
.LightModeKeyContainer.LTRDirection {
left: 1vw;
}
.LightModeKeyContainer.LTRDirection.verticalMode {
    left: 3vw;
}
.LightModeKeyContainer.verticalMode {
top: 4.0vh;
}*/
/* bodyContainer */
.bodyContainer {
    position: relative;
    width: 100%;
    min-height: 92vh;
}

.text-content * {
    text-align: justify;
}
    .text-content.RTLDirection * {
        direction: rtl;
    }
    .text-content.LTRDirection * {
        direction: ltr;
    }

/* footerContaiter */

.footerContaiter {
    position: relative;
    bottom:0;
    width: 100%;
}
.footer-Contents{
    position:relative;
    min-height:20vh;
    background-color:#222;
}
.footer-line {
    position: relative;
    background-color: #333;
    color: #aaa;
    text-align: center;
    padding: 1vh 0;
    border-top: solid 1px #aaa;
    font-size: x-small;
}


/* Page/Index */

.index-section {
    position: relative;
    width: 100%;
    height: fit-content;
    padding:1vh 0;
}
    .index-section.RTLDirection {
        direction: ltr;
    }
    .index-section.LTRDirection {
        direction: rtl;
    }

/* Page/Index/index-section-01 */

.main-logo {
    position: relative;
    top: 0vh;
    /*    width: 12.5vw;*/
    width: 18vw;
}
.main-logo.RTLDirection{
    left:10vw;
}
.main-logo.LTRDirection{
    right:10vw;
}
    .main-logo.verticalMode {
        left: 30vw !important;
        right: 30vw !important;
        width: 40vw;
    }
.main-slider {
    position: absolute;
    top: 0;
/*    width: 60vw;*/    
    width: 55vw;
    height: 100%;
}
.main-slider.RTLDirection {
    right: 15vw;
}
.main-slider.LTRDirection {
    left: 15vw;
}


#baseCarousel{
    height:100%;
}
.carousel-indicators {
    top: 90%;
}

.carousel-inner {
    height: 100%;
}

.carousel-item {
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #0005;
}

/*.carousel-image {
    position: absolute;
    top: 10vh;
    height: 80vh;
    left: 10vw;
    width: 80vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
*/
.carousel-imageback {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0vw;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    opacity: 1;
    filter: blur(0px);
    -webkit-filter: blur(0px);
}

.carousel-control-prev {
    width: 6vw;
    padding: 0 2vw;
}
.carousel-control-next {
    width: 6vw;
    padding: 0 2vw;
}

.carousel-caption p {
    color: #fff;
    background-color: #0005;
    padding: 0.5vh;
}
.carousel-caption a {
    text-decoration:none;
    color: #fff;
    background-color: #555;
    padding: 1vh;
}
.carousel-caption a:hover {
    color: #000;
    background-color: #fff;
    padding: 1vh;
}

.main-slider.verticalMode {
    display: none;
}

.ImageAlbumSlider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #0005;
}
    .ImageAlbumSlider .carousel-imageback {
        top: 5vh;
        height: 90vh;
        left: 5vh;
        width: calc(100vw - 10vh);
        background-position: center;
        background-size: contain;
        background-position-x: center;
        background-position-y: center;
        background-origin: content-box;
        background-color: #0000;
    }
    .ImageAlbumSlider .carousel-inner {
        background-color: #0000 !important;
    }
    .ImageAlbumSlider .carousel-indicators {
        top: 95%;
    }
    .ImageAlbumSlider .carousel-caption p {
        padding: 1vh;
    }


.HideImageAlbumSlider {
    position: fixed;
    top: 2vh;
    left: 2vh;
    color: #fff;
    font-weight: bolder;
    font-size: 3vh;
    border-radius: 50%;
    border: solid 1px #fff;
    width: 4vh;
    height: 4vh;
    text-align: center;
    z-index: 100;
    padding: 0px !important;
    background-color: #000;
}

    .HideImageAlbumSlider svg {
        vertical-align: unset !important;
    }

.HideVideoAlbumSlider {
    position: fixed;
    top: 2vh;
    left: 2vh;
    color: #fff;
    font-weight: bolder;
    font-size: 3vh;
    border-radius: 50%;
    border: solid 1px #fff;
    width: 4vh;
    height: 4vh;
    text-align: center;
    z-index: 100;
    padding: 0px !important;
    background-color: #000;
}

    .HideVideoAlbumSlider svg {
        vertical-align: unset !important;
    }


/* Page/Index/index-section-02 */
.index-section .text-title {
    position: relative;
    font-size: larger;
    font-weight: bolder;
    padding: 1vh 15vw;
}

.index-section .Content-parageaph {
    position: relative;
    padding: 0 15vw;
}
.index-section.verticalMode .text-title {
    padding: 0 10vw;
}

.index-section.verticalMode .Content-parageaph{
    padding: 0 10vw;
}

/* Page/Index/index-section-03 */
.main-links {
    position: relative;
    width: 100%;
}
.link-text {
    font-size:2.5vh!important;
    font-weight:bolder;
    padding: 1vh 0;
    background-color: #A98F7100;
}
    .link-text.pointer:hover {
        background-color: #A98F71;
    }

.link-text.verticalMode {
    padding:0.5vh 0;
}

p.NightLightMode{
    color:#fff;
}
.link-text.NightLightMode{
    color:#fff;
}
.ContentTitle.NightLightMode{
    color:#fff;
}
/* Page/FamilyOf Page */
.familyPersonContainer {
    height: fit-content;
    text-align: center;
}
    .familyPersonContainer:not(.verticalMode) img {
        width: 30%;
    }
    .familyPersonContainer.verticalMode img {
        width: 90%;
    }

.ContentImage {
    margin: auto;
    /*    
    max-height: 35vh;
*/
    width: 100%;
    border: solid 2px #fff;
}

    .ContentImage.verticalMode {
        margin-bottom: 3vh;
        margin-top: 3vh;
    }
.ContentVideo {
    margin: auto;
    /*    
    max-height: 35vh;
*/
    width: 100%;
    border: solid 2px #fff;
}

    .ContentVideo.verticalMode {
        margin-bottom: 3vh;
        margin-top: 3vh;
    }

.GoldenOutline {
    outline: solid 20px var(--gold);
}
    .GoldenOutline.verticalMode {
        outline: solid 5vw var(--gold);
    }

.ContentTitle {
    padding: 5vh 0;
}
.ContentTitle.verticalMode {
    padding: 2vh 0;
}

.treeDivider{
    position:relative;
    height:10vh;
}

/* Page/MemberOfFamily */
.PageHeader-Image {
    padding: 0 35vw;
}
    .PageHeader-Image.verticalMode {
        padding: 0 15vw;
    }

.PageContent-Paragraphs {
    padding: 2vh 15vw;
    text-align: justify;
    font-size: 2vh;
}
    .PageContent-Paragraphs.RTLDirection *{
        direction: rtl;
    }

    .PageContent-Paragraphs.LTRDirection *{
        direction: ltr;
    }


.PageContent-ImageAlbum {
    padding: 5vh 15vw;
}
.PageContent-VideoAlbum {
    padding: 5vh 15vw;
}
.PageContent-Paragraphs p{
    white-space:pre-line;
}

.ActivePageContent-ImageAlbum {
    background-color: #A98F71;
    color: #000;
    padding: 3vh;
    margin-bottom: 2vh;
    width: 70vw;
    margin-left: 15vw;
    border-radius: 2vh;
    font-size: large;
    font-weight: bold;
}

    .ActivePageContent-ImageAlbum:hover {
        background-color: #333;
        color: #fff;
    }

.PageContent-ImageAlbum {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 1000;
    overflow-y: scroll;
    overflow-x: hidden;
}

.ActivePageContent-VideoAlbum {
    background-color: #A98F71;
    color: #000;
    padding: 3vh;
    margin-bottom: 2vh;
    width: 70vw;
    margin-left: 15vw;
    border-radius: 2vh;
    font-size: large;
    font-weight: bold;
}

    .ActivePageContent-VideoAlbum:hover {
        background-color: #333;
        color: #fff;
    }

.PageContent-VideoAlbum {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 1000;
    overflow-y: scroll;
    overflow-x: hidden;
}


/* Page/Editor Active */
.editorClass {
    outline: dashed 1px #3330;
}
    .editorClass:hover {
        outline: dashed 1px #3335;
    }

.ObjectEditor {
/*    
    position: absolute !important;
    top: 2vh !important;
    left: 2vh !important;
    width: 4vh !important;
    border-radius: 50% !important;
    top:50%;
    left:50%;
*/    
    height: 4vh !important;
    border: dashed 0px #333 !important;
    cursor: pointer !important;
    z-index: 2 !important;
    padding:0 !important;
    margin:0 !important;
    background-color:#3332;
    width:100%;
    place-content:center;
    place-items:center;
    place-self:center;
}
    .ObjectEditor:hover {
        background-color: #3338;
    }
    .ObjectEditor:hover .blue {
        fill: darkorange !important;
    }