:root {
    --primary-color: #88afed;
    --white: #FFFFFF;
    --black: #000000;
    --complete-color: #edd9b3;
    --secondary-color: #b3836a;
    --shade-color: #f9f9f9;
    --cursor-color: #536bf6;
    --modal-color: rgba(0, 0, 0, 0.5);
    --l1-color: #D7BEB1;
    --l2-color: #EDD9B3;
    --l3-color: #E5876A;
    --l4-color: #88AFED;
    --icon-color: #88afed;
}

.primary-color {
    color: var(--primary-color) !important;
}

.complete-color {
    color: var(--complete-color) !important;
}

.secondary-color {
    color: var(--secondary-color) !important;
}

.backsecondary-color {
    background-color: var(--secondary-color) !important;
}

.black-color {
    color: var(--black) !important;
}

.white-color {
    color: var(--white) !important;
}

.icon-color {
    color: var(--icon-color) !important;
}

.backshade-color {
    background-color: var(--shade-color);
}

.l1-color {
    color: var(--l1-color) !important;
}

.l2-color {
    color: var(--l2-color) !important;
}

.l3-color {
    color: var(--l3-color) !important;
}

.l4-color {
    color: var(--l4-color) !important;
}

html {
    width: 100%;
    height: 100%;
}

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--white);
}

ul {
    list-style-type: none;
}

input[type=checkbox] {
    margin: 2px;
}

input::-ms-reveal,
input::-ms-clear {
    display: none;
}

hr.stylehr {
    overflow: visible;
    height: 1rem;
    border-style: solid;
    border-color: var(--modal-color);
    border-width: 1px 0 0 0; /*border-radius: 20px;*/
    margin-bottom: 0px;
    width: 70%;
}

    hr.stylehr:after {
        display: block;
        content: "";
        height: 30px;
        margin-top: -31px;
        border-style: solid;
        border-color: var(--primary-color);
        border-width: 0 0 1px 0; /*border-radius: 20px;*/
    }

.v-hr {
    transform: rotate(90deg);
    width: 2rem;
    margin: auto 0px;
}

.badge {
    min-width: 1.7rem; /*padding-top: .9rem;     padding-bottom: .4rem;*/
}

.search {
    margin-bottom: auto;
    height: 4rem;
    background-color: var(--white); /*padding: 10px;*/
    border: 3px solid var(--complete-color);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.psearch {
    margin-top: 5em;
}

.search-input {
    /*color: var(--white);*/
    border: 0;
    outline: 0;
    background: none;
    width: 0;
    margin-top: 5px;
    caret-color: transparent;
    line-height: 40px;
    transition: width 0.4s linear;
}

.search .search-input {
    padding: 0 .2rem;
    width: 100%; /*66vw;*/
    caret-color: var(--cursor-color);
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--primary-color);
    transition: width 0.4s linear;
}

.search:hover > .search-icon {
    /*background-color: var(--secondary-color);     color: var(--primary-color) !important;*/
}

.search-icon {
    /*padding: .7rem 1.8rem;*/
    color: var(--icon-color); /*background-color: var(--white);*/
}

a:link {
    text-decoration: none; /*color:var(--secondary-color);*/
}

a {
    /* color: var(--secondary-color);*/
    text-decoration: none;
    position: relative;
    /*line-height:1.8;*/
}

    a:hover {
        text-decoration: none;
        /*border-bottom: solid 1px #2a208d;*/
    }

    a.white {
        text-decoration: none;
        color: var(--secondary-color);
        cursor: pointer;
    }

#SiteMapPath1 > a {
    color: var(--secondary-color) !important;
}

.navbar-brand > img {
    height: 6em;
    width: 6em;
}

.navbar-payam > img {
    height: 6em;
    width: 6em;
}

.carouselimg {
    /*width: 7rem !important; height: 10rem !important;*/
    width: 7.5rem !important;
    height: 10rem !important;
}

.description-Search {
    color: var(--white);
    background-color: var(--secondary-color);
    height: 12em; /*150px;*/
    cursor: pointer; /*box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;*/
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.44);
}

    .description-Search:hover {
        background-color: var(--complete-color);
        color: var(--white);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.44);
    }

.Rpanel-group {
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, .075);
    -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, .075);
    border-radius: 30px 0px 0px 0px !important;
}

.description-Search > p {
    text-align: justify;
}

.hero:hover:after {
    border-bottom: solid 2.5em var(--complete-color);
}

.navbar-brand {
    margin: auto 1rem;
}

.hero {
    background-color: var(--primary-color);
    color: var(--white); /*position: relative;             height: 320px !important;             width: 100% !important;*/
}

    .hero:after {
        /*content: '';     position: absolute;     bottom: 85%;     left: 50%;     margin-left: -50px;     width: 0;     height: 0;     border-bottom: solid 2.5em var(--primary-color);     border-left: solid 50px transparent;     border-right: solid 50px transparent;*/
    }

.menu-toggle {
    width: 40px;
    height: 30px; /*position: absolute; top: 20px;   right: 25px;*/
    cursor: pointer;
    z-index: 100; /*margin: 1rem;*/
}

    .menu-toggle.on .one {
        -moz-transform: rotate(45deg) translate(7px, 7px);
        -ms-transform: rotate(45deg) translate(7px, 7px);
        -webkit-transform: rotate(45deg) translate(7px, 7px);
        transform: rotate(45deg) translate(7px, 7px);
        background: var(--white);
    }

    .menu-toggle.on .two {
        opacity: 0;
    }

    .menu-toggle.on .three {
        -moz-transform: rotate(-45deg) translate(8px, -10px);
        -ms-transform: rotate(-45deg) translate(8px, -10px);
        -webkit-transform: rotate(-45deg) translate(8px, -10px);
        transform: rotate(-45deg) translate(8px, -10px);
        background: var(--white);
    }

.one, .two, .three {
    width: 100%;
    height: 5px;
    background: var(--white);
    margin: 6px auto;
    backface-visibility: hidden;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.hidden {
    display: none;
}

nav ul {
    padding: 0;
    list-style: none;
    text-align: center;
    background-color: var(--modal-color);
    overflow: auto;
    display: inline-block;
    transition: opacity 500ms;
}

    nav ul li {
        /*padding:.2rem 0px;*/
        background-color: var(--white) !important;
    }
/*nav ul a
{
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    text-decoration: none;
    color: var(--primary-color) !important;
    font-size: 1.1em;
    line-height: 1.5;
    width: 100%;
    display: block;
}
nav ul a:hover
{
    background-color: var(--white);
    color: var(--primary-color);
}*/

.menu-section.on {
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--modal-color);
    position: absolute;
    top: 0px;
    left: 0px;
}

.menuicon {
    cursor: pointer;
    width: 2.5rem;
}

    .menuicon.on {
        /*padding: 0px 1rem;*/
    }

#navdiv {
    position: absolute;
    width: 100%;
    z-index: 999;
}

li {
    background-color: transparent !important; /*border-radius: 8px;*/
}

.colors {
    width: 100%;
    float: inherit;
    padding-bottom: 4rem !important;
}

    .colors a {
        width: 43.3px;
        height: 30px;
        float: left;
    }

    .colors .blue {
        background: #022851;
    }

    .colors .red {
        background: #f1c40f;
    }

    .colors .yellow {
        background: #744caf;
    }

    .colors .green {
        background: #31c690;
    }

.markyellow {
    background: var(--complete-color);
    font-size: inherit;
    color: var(--black);
}

.red {
    color: red;
}

    .red:hover {
        color: #f1c40f;
    }

.header {
    min-height: 60vh;
    background: linear-gradient(to right, var(--secondary-color), var(--complete-color));
    color: var(--white);
    clip-path: ellipse(100vw 60vh at 50% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.details {
    text-align: center;
}

.profile-pic {
    height: 6rem;
    width: 6rem;
    object-fit: center;
    border-radius: 50%;
    border: 2px solid #fff;
}


.heading {
    font-weight: 400;
    font-size: 1.3rem;
    margin: 1rem 0;
}

#ListDiv {
    border-right: 3px solid var(--complete-color);
    border-left: 3px solid var(--complete-color);
    border-bottom: 3px solid var(--complete-color);
    box-shadow: -1px 3px 1px 1px rgba(0, 0, 0, .075);
    -webkit-box-shadow: -1px 3px 1px 1px rgba(0, 0, 0, .075);
    border-radius: 0px 0px 6px 6px;
    background-color: var(--white);
    z-index: 101;
    display: none;
    position: absolute;
    top: -5px;
    overflow: auto;
    max-height: 40vh;
}

.suggestionRow {
    border: none;
    padding-right: 2.5rem;
    padding-left: 2.5rem;
}

.suggestionRowActivertl {
    border-left: 4px solid var(--cursor-color);
}

.suggestionRowActiveltr {
    border-right: 4px solid var(--cursor-color);
}

.mouseonrowsuggestion {
    background-color: var(--complete-color) !important;
}

/*.actionBelow
{
    display: inline-block;
    color: #235A90;
    text-decoration: none;
    margin: 1px 2px;
    border-bottom: solid 1px gray;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 3px;
    min-width: 30px;
    text-align: center;
    border-radius: 4px;
    background: linear-gradient(to left, transparent 50%, #69C 52%) right;
    background-size: 200%;
    transition: .4s ease-out;
    background-repeat: no-repeat;
}
a.actionBelow:hover
{
    background-color: #69C !important;
    color: whitesmoke !important; 
    border-radius: 5px;
    background-position: left;
}*/
.defback {
    /*background-color: var(--secondary-color);*/
}

.se-di {
    margin-left: 5vw;
    margin-right: 5vw;
    background-color: var(--white);
}

    .se-di > div, .se-di > div > div {
        max-height: inherit;
    }

.ace-nav {
    height: 100%;
    margin: 0 !important;
}

    .ace-nav > li {
        /*line-height: 45px;     height: 45px;*/
        padding: 0;
        position: relative;
        float: left;
    }

.nav > li, .nav > li > a {
    display: block;
    position: relative;
}

.ace-nav > li > a {
    color: var(--complete-color);
    display: flex;
    line-height: inherit;
    text-align: center;
    height: 100%;
    width: auto;
    min-width: 50px;
    padding: 0 8px;
    position: relative;
    text-decoration: none;
}

.ace-nav .nav-user-photo {
    /*margin: -4px 8px 0 0;*/
    border-radius: 100%; /*border: 2px solid #FFF;*/
    max-width: 1.8rem;
}

.user-info {
    max-width: 100px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    vertical-align: top; /*line-height: 15px;*/
    position: relative; /*top: 6px;*/
    color: var(--secondary-color);
}

.ace-nav > li > a > .ace-icon {
    display: inline-block;
    color: var(--secondary-color);
    text-align: center;
}

.user-info small {
    display: block;
}

.dropdown-menu > li > a {
    text-decoration: none;
    color: var(--primary-color) !important;
}

    .dropdown-menu > li > a:hover {
    }

.dropdown-menu.show {
    min-width: 4rem;
    left: -1.5rem !important; /*-1.5rem*/
}

.invalid-feedback {
    /*text-align:start;*/
    margin-top: -1.4rem;
    z-index: 10;
}

.modal-open .container-fluid, .modal-open .container {
    -webkit-filter: blur(5px) grayscale(90%);
}

.modal-backdrop {
    background-color: var(--modal-color); /*transparent;*/
}

i {
    padding-right: 0.4rem;
    padding-left: 0.4rem;
}

.panel-titleTop {
    padding: .5rem !important;
    background-color: var(--l1-color) !important;
    color: var(--black) !important;
}

    .panel-titleTop:after {
        content: "\25b2";
    }

    .panel-titleTop.collapsed:after {
        /* symbol for "collapsed" panels */
        content: "\25bc";
    }

.panel-title {
    /*padding: .5rem !important;     background-color: #f8f8f8;*/
    border-radius: 30px 0px 0px 0px !important;
}

    .panel-title > a, .SearchDivH > a {
        border-radius: 30px 0px 0px 0px !important;
    }

i.panel-title {
    font-size: 1.6rem;
    color: var(--white);
    border: none;
    width: 20%;
}

    i.panel-title::before {
        font-size: 1.2rem;
        padding: .15rem .4rem;
    }

.collapsel {
    /*top: -7px;     position: relative;*/
}

.smenucard-link:after {
    content: '\25bc'; /* Unicode character for "plus" sign (+) */
    font-size: 13px; /*color: #777;*/
    float: left;
    margin-left: .4rem;
    margin-right: .4rem;
}

.activeaccordion:after {
    content: "\25b2"; /* Unicode character for "minus" sign (-) */
    margin-left: .4rem;
    margin-right: .4rem;
}

.smenucard-body > ul > li {
    background-color: transparent !important;
}

.smenucard-body > ul {
    margin: 0px 3rem;
    background-color: transparent;
}

.item {
    border-top: 1px solid var(--secondary-color);
    overflow: hidden;
}

.btnmenu {
    display: block;
    padding: 1.2rem 0px;
    background: var(--complete-color);
    color: var(--black);
    position: relative;
}

    .btnmenu:hover {
        text-decoration: none;
    }

    .btnmenu::before {
        content: "";
        position: absolute;
        width: 1.4rem;
        height: 1.4rem; /*background: var(--complete-color);*/
        right: 2rem;
        bottom: -7px;
        transform: rotate(45deg);
    }


.smenu {
    background: var(--cursor-color) !important;
    overflow: auto; /*transition: max-height 0.3s;*/
    max-height: 0;
}

    .smenu a {
        display: block;
        padding: 1rem 1.2rem;
        color: var(--white);
        margin: 0.2rem 0;
        position: relative;
        text-decoration: none;
    }

        .smenu a::before {
            content: "";
            position: absolute;
            width: 6px;
            height: 100%;
            background: var(--complete-color);
            right: 0;
            top: 0; /*transition: .3s;*/
            opacity: 0;
        }

        .smenu a:hover::before {
            opacity: 1;
            text-decoration: none;
        }

.item:target .smenu {
    max-height: 100%;
}

/*::-webkit-input-placeholder {
   font-size: 5rem;
}

:-moz-placeholder { 
      font-size: 25px;
}

::-moz-placeholder {  
      font-size: 25px;
}

 Overriding styles */

#searchTermInput::-webkit-input-placeholder {
    font-size: 1.1rem !important;
}

#searchTermInput:-moz-placeholder {
    /* Firefox 18- */
    font-size: 1.1rem !important;
}

#searchTermInput::-moz-placeholder {
    /* Firefox 19+ */
    font-size: 1.1rem !important;
}

/*input:focus::placeholder {
  color: transparent!important;
}*/
::-webkit-scrollbar {
    width: 1rem;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 5px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--icon-color);
    }

.carousel-control-next, .carousel-control-prev /*, .carousel-indicators */ {
    filter: invert(100%);
}

.iconsearch {
    cursor: pointer;
    font-size: x-large !important;
    margin: 3px 0px;
    color: var(--complete-color);
}

.display-5 {
    font-size: 1.1rem;
    line-height: 1.2;
}

.display-icon {
    font-size: 1.5rem;
    /*display: block;
    font-weight: bold !important;*/
}

.cursorpointer {
    cursor: pointer;
}

[class*='close2-'] {
    color: var(--complete-color);
    font: 14px/100% arial, sans-serif; /*position: absolute;*/
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    vertical-align: middle;
}

.close2-classic:after {
    content: '✖'; /* ANSI X letter */
}

.dialog2 {
    /*background: #ddd;*/
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    padding: .3rem;
    margin: .1rem;
    color: var(--secondary-color);
}

.X-large {
    font-size: x-large;
}

.large {
    font-size: large;
}

.medium {
    font-size: medium;
}

.SearchDivH {
    border: 3px solid var(--complete-color);
    border-radius: 30px 0px 30px 0px !important;
    margin: 0px !important;
    box-shadow: 0px 0px 10px 7px rgba(0, 0, 0, .075);
    -webkit-box-shadow: 0px 0px 10px 7px rgba(0, 0, 0, .075);
}

.reversedir {
    flex-direction: row-reverse;
}

.pagination > li > a {
    border-radius: 100% !important;
}

.pagination > li {
    margin-left: .1em;
    margin-right: .1em;
}

.select-noborder {
    border: none; /*border-bottom: 1px solid;*/
    color: var(--secondary-color);
}

#dataTypesCell a:link {
    color: var(--black);
}

#dataTypesCell a:hover {
    text-decoration: none;
}

#collapsedocument li:hover {
    color: var(--l4-color) !important;
    cursor: pointer;
}

.listLinkSelected {
    background-color: var(--l4-color) !important;
    color: var(--white);
}

#collapsebranch li:hover {
    color: var(--l3-color) !important;
    cursor: pointer;
}

.BranchLinkSelected {
    background-color: var(--l3-color) !important;
    color: var(--white);
}

#collapsehistory li:hover {
    color: var(--l2-color) !important;
    cursor: pointer;
}

#collapserefine li:hover {
    color: var(--l1-color) !important;
    cursor: pointer;
}

.bottomlinksearch:nth-child(odd) {
    color: var(--secondary-color); /*var(--secondary-color);*/ /*width: 3rem;     height: 3rem;*/
    text-align: center; /*transform: scaleY(0);*/
    font-weight: normal; /*opacity: 1;     transition: .5s;*/
    font-size: .7em;
    padding: .3rem !important;
}

.bottomlinksearch:nth-child(even) {
    color: var(--secondary-color); /*var(--complete-color);*/ /*width: 3rem;     height: 3rem;*/
    text-align: center;
    font-weight: normal; /*opacity: 1;     transition: .5s;*/
    font-size: .7em;
    padding: .3rem !important;
}

.bottomlinksearch:hover:nth-child(odd) {
    /*background-color: var(--secondary-color);     color: var(--white);     width: 3rem;     height: 3rem;     text-align: center;     text-overflow: ellipsis;     overflow: hidden;     white-space: nowrap;*/
    color: var(--icon-color); /*opacity: 0.4;     transition: 1s;*/
    background-color: var(--shade-color);
    border-radius: 50%;
}

.bottomlinksearch:hover:nth-child(even) {
    /*background-color: var(--complete-color);     color: var(--white);     width: 3rem;     height: 3rem;     text-align: center;     text-overflow: ellipsis;     overflow: hidden;     white-space: nowrap;*/
    color: var(--icon-color); /*opacity: 0.4;     transition: 1s;*/
    background-color: var(--shade-color);
    border-radius: 50%;
}

.bottomspansearch {
    white-space: initial;
    width: 3rem;
    display: block;
    font-size: 1.2em;
}

.svgicon {
    width: 1.9rem;
    height: 1.9rem;
    display: block;
    text-align: center;
    margin: auto;
    fill: var(--secondary-color); /*fill: none;   stroke-width: 3;   stroke: var(--secondary-color);;*/
}

    .svgicon:hover {
        stroke: var(--icon-color);
    }

    .svgicon svg path {
        stroke: blue;
    }

​ .bottomspansearch {
    white-space: initial;
    width: 3rem;
    display: block;
    font-size: 1.2em;
}

.reveal {
    position: relative;
    transform: translateY(10rem);
    opacity: 0;
    transition: 1s all ease;
}

    .reveal.active {
        transform: translateY(0);
        opacity: 1;
    }

.fashare {
    /*padding: 5px;*/
    font-size: 1.8rem !important; /*width: 50px;*/
    text-align: center;
    text-decoration: none;
    margin: 3px 5px;
}

    /* Add a hover effect if you want */
    .fashare:hover {
        opacity: 0.7;
    }

#sharediv {
    /*height:40px;     background:red;     color:#fff;     position:relative;     width:200px;     text-align:center;     line-height:40px;     */
    position: absolute;
    top: 0px;
    display: none;
    border-radius: 10px;
    padding: 10px 0px;
    background-color: var(--secondary-color);
}

    #sharediv:after {
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        left: 100%;
        top: 45%;
        border: 10px solid transparent;
        border-left: 10px solid var(--secondary-color);
    }

.loadimg {
    position: absolute;
    top: 30%;
    left: 30%; /*width:100%;     height:100%;*/
}

.noborder {
    border: none !important;
}

.aligntopset {
    position: relative;
    top: 0.5rem;
}

.resultIMG {
    opacity: 0.4;
    font-size: 8rem;
}

.imgradif {
    max-width: 1.4rem;
    max-height: 1.6rem;
}

.dchecks {
    /* Double-sized Checkboxes */
    -ms-transform: scale(1.2); /* IE */
    -moz-transform: scale(1.2); /* FF */
    -webkit-transform: scale(1.2); /* Safari and Chrome */
    -o-transform: scale(1.2); /* Opera */
    transform: scale(1.2);
}

.iconserach {
    font-size: x-large;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.fillbtn {
    border: 1px solid var(--icon-color);
    background-color: var(--icon-color);
    border-radius: 50%;
    width: 1.6em;
    height: 1.6em;
}

.fillbtnx {
    border: 1px solid var(--icon-color);
    border-radius: 50%; /*padding: 0.45rem !important;*/
    background-color: var(--icon-color); /*width:2em;     height:2em;*/
    width: 1.6em;
    height: 1.6em;
}

.fillbtnsq {
    color: var(--white);
    background-color: var(--icon-color);
    border-color: var(--icon-color);
}

.resultimg {
    width: 10rem; /*height: 100%;*/
    height: 10rem;
}

.resultchkno {
    top: .2rem;
    left: .2rem;
    font-size: .7rem; /*width:100%;     text-align:center;*/
}

#toTop {
    /*padding: .5rem .1rem;     color: var(--secondary-color);     position: fixed;     bottom: 2rem;     left: 1rem;     display: none;     border-radius:100%;     cursor: pointer;*/
    /*position: absolute;
    bottom: .2rem; */ /*left: 1.2rem;*/
    position: fixed;
    bottom: 6.6rem;
    display: none;
    border-radius: 50%;
    border: var(--secondary-color) solid .2rem;
    /*background-color: var(--complete-color);*/
    padding: .4rem;
    z-index: 1000;
}

    #toTop > i {
        color: var(--secondary-color);
        font-size: 1.5rem;
        font-weight: bold;
    }

.iconfooter {
    /*background: aliceblue;*/
    position: fixed;
    bottom: 2.3rem; /*right: 1rem;*/
    cursor: pointer;
    border-radius: 100%;
}

.boxmore {
    white-space: nowrap;
    display: inline-block;
    align-self: flex-end;
    cursor: pointer;
    color: var(--complete-color);
}

    .boxmore:hover {
        color: var(--secondary-color);
    }

.boxmorenone {
    display: none !important;
}

.fieldValue, .fieldValueTitle {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-link {
    color: var(--secondary-color) !important;
}

.page-item.active .page-link {
    background-color: var(--secondary-color) !important;
    z-index: 3;
    color: var(--white) !important;
    border-color: var(--secondary-color) !important;
}

#urlmodal .modal-dialog {
    max-width: 95% !important;
    height: 90%;
}

#urlmodal .modal-content {
    max-height: 90%;
    min-height: 80%; /*width:auto;   min-width:90%;*/
}

#urlmodal .modal-body {
    max-height: 90%;
    overflow-y: auto;
    text-align: center;
}

.modal-header .close:hover {
    color: var(--secondary-color);
}
/*.show > ul > li
{
    border-top:none;
}*/
.pgf {
    border-inline-start: solid;
    writing-mode: horizontal-tb;
    margin: 0px 5px;
    border-inline-start-width: 2px;
    padding: 2px 10px;
    white-space: nowrap;
}

.cnowrap {
    white-space: nowrap;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    min-width: 4.2rem;
}

.accordionMenu {
    margin: 0 auto;
}

    .accordionMenu input[type=radio] {
        display: none;
    }

    .accordionMenu label {
        display: block;
        height: 30px;
        line-height: 27px;
        padding: 0 25px 0 10px;
        background: var(--primary-color); /*#396088;*/
        font-size: 14px;
        color: var(--white);
        position: relative;
        cursor: pointer;
        border-bottom: 1px solid #e6e6e6;
        margin-bottom: 0px;
    }


        .accordionMenu label::after {
            display: block;
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 3px 0 3px 6px;
            border-color: transparent transparent transparent var(--white);
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 10;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

    .accordionMenu .content {
        max-height: 0;
        height: 0;
        overflow: hidden;
        -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        -o-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;
    }

        .accordionMenu .content .inner .arowd {
            font-size: 1.1rem;
            color: var(--secondary-color);
            line-height: 1.2;
            background: white;
            padding: 10px 10px;
            display: flex !important;
        }


    .accordionMenu input[type=radio]:checked + label:after {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .accordionMenu input[type=radio]:checked + label + .content {
        max-height: 400px;
        height: auto;
        overflow: auto;
    }

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: var(--white);
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

    .thumbnail > img, .thumbnail a > img {
        margin-right: auto;
        margin-left: auto;
    }

    .thumbnail > img, .thumbnail a > img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

.pcomment {
    text-align: justify;
    text-indent: 2%; /*padding: 15px;*/
}

.commentbadge {
    border-radius: 3px; /*line-height: 2.5;*/
    min-width: 30px;
}

li > p {
    margin: 0px;
}

li > span > label {
    margin: 0px;
}

/*#DigitalStatusradio .active
{
    border:1px solid var(--white) !important;
}*/
.everyrowresult {
    border-radius: 5px !important;
    box-shadow: 0px 0px 10px 7px rgba(0, 0, 0, .075);
    -webkit-box-shadow: 0px 0px 10px 7px rgba(0, 0, 0, .075); /*background-color:#fafafa !important;*/
}

.linkedFieldValueTitle, .linkedFieldValue {
    cursor: pointer;
    font-weight: bold;
    line-height: initial;
}

.ellips {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 95%;
    display: inline-block;
}

.colorcircle {
    width: 2rem;
    height: 2rem; /*background: #022851;     -moz-border-radius: 50%;     -webkit-border-radius: 50%;     border-radius: 50%;*/
}

/*.icon-setting {
    position: absolute;
    top: 8.1em;
    left: 0px;
    cursor: pointer;
    overflow: hidden;
    z-index: 99;*/
/*padding:.5rem .1rem;*/
/*}

    .icon-setting i {
        position: relative;
        font-size: 1.8rem;
        width: 2.8rem;
        height: 2.8rem;
        display: block;
        text-align: center;
        padding-top: .4rem;*/
/*transition: all 0.3s ease;*/
/*}

    .icon-setting span {
        font-size: 1.2rem;
        color: var(--white);
        text-align: center;
        display: block;
        height: 2.7rem;
        padding-top: 3px;
    }*/

/*menuicon*/
/*******************************************************************************************/
/*******************************************************************************************/
.icon-bar-list {
    position: absolute;
    top: 8.1em;
    right: 0px;
    z-index: 1000;
}

    .icon-bar-list a {
        display: block;
        text-align: center;
        padding: 1.4rem 0px;
        transition: all 0.3s ease;
        font-size: large;
        color: var(--white);
        position: absolute;
        right: -40px;
        width: 80px;
        text-decoration: none; /*border-radius: 10px 0 0 10px;*/
    }


@media (pointer: fine) {
    .icon-bar-list a:hover {
        background-color: var(--black);
        right: 0px; /*border-radius: 10px 0 0 10px;*/
    }
}

.icon-bar-list a:active {
    background-color: var(--black);
    right: 0px; /*border-radius: 10px 0 0 10px;*/
}

.icon-bar-list i {
    top: .25rem;
    inset-inline-end: .45rem;
    position: absolute;
    font-size: 1.8rem;
}

.icon-bar-list span {
    inset-inline-start: 2px;
    top: 9px;
    position: absolute;
    font-size: 1.2rem;
}
/*******************************************************************************************/
.icon-bar-list-left {
    left: 0px !important;
    right: auto !important;
}

    .icon-bar-list-left a {
        left: 0px !important;
        width: 40px !important;
        right: auto !important;
        background: red;
    }

        .icon-bar-list-left a:hover {
            background-color: var(--black);
        }

    .icon-bar-list-left i {
        inset-inline-start: .45rem !important;
    }

    .icon-bar-list-left span {
        display: none !important;
    }
/*******************************************************************************************/
.icon-bar-list-ltr {
    left: 0px !important;
    right: auto !important;
}

    .icon-bar-list-ltr a {
        left: -40px !important;
        right: auto !important;
    }

        .icon-bar-list-ltr a:hover {
            left: 0px !important;
        }
/*******************************************************************************************/
.icon-bar-list-left-ltr {
    right: 0px !important;
    left: auto !important;
}

    .icon-bar-list-left-ltr a {
        right: 0px !important;
        left: auto !important;
    }


/*******************************************************************************************/
/*******************************************************************************************/
/*menuicon*/
.helpbtn {
    background: var(--modal-color);
    color: var(--white);
}

#DigitalStatusradio {
    position: absolute;
    background-color: var(--white);
    z-index: 100;
    /*width: 15rem;*/
    right: 0px;
    top: 90%;
    display: grid;
}


.toggle {
    --width: 30px; /*--height: calc(var(--width) / 3);*/
    --height: 30px;
    position: relative;
    display: inline-block;
    width: var(--width);
    height: var(--height);
    /*box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);*/
    cursor: pointer;
}

    .toggle input {
        display: none;
    }

    .toggle .labels {
        position: absolute;
        top: 5px;
        left: 0;
        width: 100%;
        height: 100%;
        transition: all 0.4s ease-in-out;
        overflow: hidden;
        font-size: x-large;
    }

        .toggle .labels::after {
            /*content: attr(data-off);*/
            content: '\f186';
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            color: var(--white);
            /*background-color: var(--black);*/
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
            transition: all 0.4s ease-in-out;
        }

        .toggle .labels::before {
            /*content: attr(data-on);*/
            content: '\f185';
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 0;
            left: calc(var(--width) * -1);
            height: 100%;
            width: 100%;
            color: var(--white);
            /*background-color: var(--white);*/
            text-align: center;
            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4);
            transition: all 0.4s ease-in-out;
        }

    .toggle input:checked ~ .labels::after {
        transform: translateX(var(--width));
    }

    .toggle input:checked ~ .labels::before {
        transform: translateX(var(--width));
    }

.defaultsearchimg {
    max-height: 100%;
    max-width: 100%;
}

.noborderbottom {
    border-bottom: none !important;
}

.show .list-group-item {
    border-top: none !important;
}

#downloadDiv {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    position: absolute;
    z-index: 100;
    right: 0px;
}

.custom-control-label::before {
    top: 0px;
}

.custom-control-label::after {
    top: .16rem !important;
}

#togglePassword {
    position: absolute;
    left: 0px;
    top: 35%;
    z-index: 1000;
}


.progress-container {
    width: 100%;
    height: 8px;
    /*background: #ccc;*/
}

/* The progress bar (scroll indicator) */
.progress-bar {
    height: 8px;
    background: var(--complete-color);
    width: 0%;
}

#settingnav {
    position: absolute;
    top: 8.1em;
    left: 0px;
    z-index: 900;
    direction: initial;
}

    #settingnav nav {
        max-width: 300px;
        max-height: 50px;
        background: var(--modal-color);
        color: var(--white);
        -webkit-clip-path: circle(24px at 30px 24px);
        clip-path: circle(24px at 32px 24px);
        -webkit-transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
        transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
    }

        #settingnav nav:hover {
            max-height: fit-content;
            -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
            -webkit-transition-duration: 0.75s;
            transition-duration: 0.75s;
            -webkit-clip-path: circle(390px at 225px 24px);
            clip-path: circle(390px at 150px 24px);
        }

    #settingnav .stgdiv {
        display: block;
        line-height: 50px;
        padding: 0 20px;
        color: inherit;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        #settingnav .stgdiv:hover {
            background: var(--complete-color);
        }

        #settingnav .stgdiv:active {
            background: var(--complete-color);
        }

    #settingnav .navicon {
        padding: 8px 11px;
        cursor: pointer;
        -webkit-transform-origin: 32px 24px;
        -ms-transform-origin: 32px 24px;
        transform-origin: 32px 24px;
    }

        #settingnav .navicon div {
            position: relative;
            width: 20px;
            height: 2px;
            background: var(--white);
            
        }

            #settingnav .navicon div:before,
            #settingnav .navicon div:after {
                display: block;
                content: "";
                width: 20px;
                height: 2px;
                background: white;
                position: absolute;
            }

            #settingnav .navicon div:before {
                top: -7px;
            }

            #settingnav .navicon div:after {
                top: 7px;
            }