/*== view buttons bar ==*/
.drt-viewBtnsBar{
    text-align:right
}
.drt-viewBtnsBar li {
    float: right;
    padding: 5px;
}
.drt-viewBtns{
    font-size:19px;
    color:#333;
    padding:5px !important;
    -webkit-transition:ease .3s;
    -moz-transition:ease .3s;
    -o-transition:ease .3s;
    transition:ease .3s;
}
.drt-viewBtns:hover{
    background-color:#FFCA08;
    color:#333;
}

/*== common ==*/
.drt-personRow *{
    -webkit-transition: ease .3s;
    -moz-transition: ease .3s;
    -o-transition: ease .3s;
    transition: ease .3s;
}
.drt-personNameBox1 , .drt-personNameBox2{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:15px;
}
.drt-personNameBox2{
    text-align:center;
}
/*link*/
.drt-personLink{
    display:block;
    position:absolute;
    z-index:22;
    /*background-color:red;*/
    /*opacity:.5;*/
    width:100%;
    height:100%;
    top:0;
    bottom:0;
    right:0;
    left:0;
}
/*name*/
.drt-PersonName {
    font: 22px regular,iranYekan,sans-serif !important;
    margin-bottom: 5px;
}
/*position*/
.drt-personPosition{
    font:12px regular,iranYekan,sans-serif !important;
    margin-top: 0;
}
/*detail*/
.drt-persondtl > div:first-child li {
    font: 14px regular,iranYekan,sans-serif !important;
    margin:15px 0;
}
.drt-persondtl > div:first-child .drt-icon {
    width: 15px;
    margin-right: 5px;
    text-align: center;
}
/*social medias*/
.drt-socialMedias {
    display: inline-block;
    margin-top: 10px;
    position:relative;
    z-index:55;
}
.drt-socialMedias li {
    float: right;
}
.drt-socialMedias li a{
    text-align:center;
    color:#fff;
    font-size:18px;
    display:block;
    width:30px;
    height:30px;
    margin:5px 2px;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    background-color:#464646;
    padding:0;
    position:relative;
}
.drt-socialMedias li a::after{
    content:'';
    display:block;
    width:calc(100% + 6px);
    height:calc(100% + 6px);
    border:solid 1px #fcaf17;
    position:absolute;
    top:-4px;
    right:-4px;
   -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    -webkit-transition: ease .3s;
    -moz-transition: ease .3s;
    -o-transition: ease .3s;
    transition: ease .3s;
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    transform:scale(0);
    z-index:0;
}
.drt-socialMedias li a:hover{
    background-color:#fcaf17;
}
.drt-socialMedias li a:hover::after{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
.drt-socialMedias a i{
    position:relative;
    top:50%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}


.drt-personBox {
    margin-bottom: 30px;
    position:relative;
}

/*person's delete button*/
.drt-deletePrsBtn{
    text-align: center;
    width: 35px;
    height: 30px;
    position: absolute;
    left: 35px;
    top: -30px;
    z-index: 22;
    background-color: #ccc;
}
.drt-deletePrsBtn input{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:2;
    opacity:0;
    cursor:pointer;
}
.drt-deletePrsBtn i.fa-trash{
    color:#555;
    position:relative;
    z-index:1;
    font-size:19px;
    line-height:27px;
}
.drt-deletePrsBtn:hover{
    background-color:#db2828;
}
.drt-deletePrsBtn:hover i.fa-trash{
    color:#fff;
}

/*person's edit button*/
.drt-personBox .drt-editItem {
    text-align: center;
    width: 35px;
    height: 30px;
    position: absolute;
    z-index: 22;
    background-color: #ccc;
    left: 0;
    top: -30px;
}
.drt-personBox .drt-editItem img{
    width:60%;
    margin-top:3px;
}
.drt-personBox .drt-editItem:hover{
    background-color: #b5cc18;
}


/*==== list mode =====*/
/*box*/
.drt-personList .drt-personBox > div.uk-clearfix {
    border-bottom: solid 1px #464646;
    padding: 0 10px 30px 10px;
    position: relative;
}

/*image*/
.drt-personList .drt-personImg {
    display: inline-block;
    width: 200px;
    height: 200px;
    float: left;
}
/*name box 1*/
.drt-personList .drt-personNameBox1{
    float:left;
    width:calc(45% - 100px);
    border-right:solid 1px #4f4f4f;
}

/*name box 2*/
.drt-personList .drt-personNameBox2{
    width:calc(55% - 100px);
    float:left;
}
/*name*/
.drt-personList .drt-PersonName {
    color: #656565;
}
.drt-personList .drt-personNameBox2 > div:first-child{
    display:none;
}
/*position*/
.drt-personList .drt-personPosition {
    color: #9a9a9a;
}
/*name box 1 info*/
.drt-personList .drt-personNameBox1 ul{
    margin-top:20px;
}
.drt-personList .drt-personNameBox1 li {
    font: 13px regular,iranYekan,sans-serif !important;
    /*color: #9a9a9a;*/
    color: #313131;
    margin: 10px 0;
}
.drt-personList .drt-personNameBox1 li > span:first-child{
    font-weight:bold;
}

/*name box 2 info*/
.drt-personList .drt-persondtl > div:first-child {
    width: 70%;
    text-align: left;
}
.drt-personList .drt-persondtl li {
    color: #656565;
}

/*===== grid mode =====*/
.drt-personGrid {
    justify-content: flex-end 
}
.drt-personGrid .drt-personBox > div.uk-clearfix{
    position:relative;
    overflow:hidden;
    height:200px;
    border:solid 1px #eee;
}
/*in 4 column*/
.drt-personGrid .drt-personBox.uk-width-large-1-4 > div.uk-clearfix {
    height:280px;
}
/*in 3 column*/
.drt-personGrid .drt-personBox.uk-width-large-1-3 > div.uk-clearfix {
    height: 310px;
}
/*in 2 column*/
.drt-personGrid .drt-personBox.uk-width-large-1-2 > div.uk-clearfix {
    height: 350px;
}
/*image*/
.drt-personGrid .drt-personImg {
    width: 100%;
    height: 100%;
}
/*name box 1*/
.drt-personGrid .drt-personNameBox1 {
    position: absolute;
    right: 0;
    right:0;
    bottom:0;
    width: 100%;
    background-color: rgba(20,20,20,.5);
    text-align:right;
    padding:15px 25px;
}
.drt-personGrid .drt-personNameBox1 ul{
    display:none;
}
.drt-personGrid .drt-personNameBox1 .drt-PersonName{
    color:#fff;
}
.drt-personGrid .drt-personNameBox1 .drt-personPosition{
    color:#fcaf17;
}
/*link hover*/
.drt-personGrid .drt-personBox:hover .drt-personNameBox1{
    right:-100%;
}
/*name box 2*/
.drt-personGrid .drt-personNameBox2 {
    position: absolute;
    right: 100%;
    left: -100%;
    top:0;
    bottom: 0;
    width: 100%;
    height:100%;
    background-color: rgba(20,20,20,.5);
    padding:20px;
}
.drt-personGrid .drt-personNameBox2 > div:first-child{
    text-align:left;
}
.drt-personGrid .drt-personNameBox2 .drt-PersonName {
    color: #fff;
}

.drt-personGrid .drt-personNameBox2 .drt-personPosition {
    color: #fcaf17;
}
.drt-personGrid .drt-personNameBox2 .drt-persondtl{
    position:absolute;
    width:100%;
    right:0;
    bottom:10px;
}
.drt-personGrid .drt-personNameBox2 .drt-persondtl > div:first-child{
    text-align:left;
    padding:0 20px;
}
.drt-personGrid .drt-persondtl > div:first-child .drt-icon {
    color: #fcaf17;
}
.drt-personGrid .drt-persondtl > div:first-child li{
    font-size:12px !important;
    color:#fff;
}
/*link hover*/
.drt-personGrid .drt-personBox:hover .drt-personNameBox2 {
    right: 0;
}



/* alert */
.uk-alert{
    font-family:regular,iranYekan,sans-serif;
}
a[id$="lnkSearchMessage"]{
    display:block;
}

/* directory */
.dp-module-default .dp-module-content div[id$="dirFeature_"] {
    width: 50% !important;
    display: block !important;
    float: left !important;
    margin:10px 0 !important;
}
div[id$="dirFeature_"] select[id*="ddlDirectory"]{
    height:36px;
    border:solid 1px #a1a1a1;
    min-width:120px;
}

/* search */
div[id$="_SearchContainer"]{
    width:50%;
    float:right;
    position:relative;
    margin:10px 0 !important;
    
}
    div[id$="_SearchContainer"] input[type="text"] {
        font: 13px regular,iranYekan,sans-serif;
        float: right;
        border: solid 1px #a1a1a1;
        width: 240px;
        height: 36px;
        padding: 0 31px 0 5px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: left
    }
div[id$="_SearchContainer"] input[type="submit"]{
    float:right;
    background-color:aqua;
    border:none;
    /*background-color:transparent;*/
    width:30px;
    height:36px;
    position:absolute;
    right:1px;
    top:0;
    z-index:2;
    opacity:0;
    cursor:pointer;
}
div[id$="_SearchContainer"] span.far.fa-search{
    display:block;
    width:30px;
    height:36px;
    position:absolute;
    right:1px;
    top:0;
    z-index:1;
    text-align: center;
    font-size: 17px;
    line-height: 37px;
    color:#a1a1a1;
}
div[id$="_SearchContainer"] input[type="submit"]:hover + span.far.fa-search{
    color:#FFCA08;
}

/* perosons row */
[id*="updPanelPersonInfo"] div[id$="_SearchContainer"]:first-child {
    width: 100% !important;
}

/*search result alert*/
a[id*="lnkResultMessage"] {
    display: inline-block;
    width: 98%;
}
a[id*="lnkResultMessage"].uk-alert-danger{
    color: #ff695e;
}
a[id*="lnkResultMessage"].uk-alert-success{
    color:#659f13;
}

/*loading*/
.drt-personsInfo{
    height:400px;
    overflow:hidden;
}
.drt-personsInfo, drt-personsNavBar {
    position: relative;
}
.drt-personsNavBar{
    z-index:20;
    display:flex !important;
    flex-direction:row-reverse !important;


}
.drt-personsLoading {
    background-color: #333;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 70;
    text-align:center;
    min-height:300px;
}
.drt-personsLoading > div{
    position:relative;
    top:50%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    text-align:center;
}
.drt-personsLoading span{
    display:block;
    width:100px;
    height:100px;
    background-color:#fff;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    padding:10px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    margin:0 auto;
}
.drt-personsLoading span img{
    width:60%;
    max-height:100%;
    margin-top:10px;
}
.drt-personsLoading h3{
    font:16px regular,iranYekan,sans-serif;
    color:#fff;
}


@media only screen and (max-width : 860px) {
    .drt-personList .drt-persondtl > div:first-child {
        width: 100%;
    }
}


@media only screen and (max-width : 768px) {
    .dp-module-default .dp-module-content > div[id$="dirFeature_"], div[id$="_SearchContainer"] {
        width: 100% !important;
    }

    div[id$="_SearchContainer"] {
        margin-top: 20px;
    }

        div[id$="_SearchContainer"] input[type="text"],
        div[id$="dirFeature_"] table,
        div[id$="dirFeature_"] select[id*="ddlDirectory"] {
            width: 100% !important;
        }

    /*list mode*/
    .drt-personList .drt-personNameBox2, .drt-personList .drt-personNameBox1 {
        width: 100%;
    }

    .drt-personList .drt-personNameBox2 {
        padding-top: 0;
    }

    .drt-personList .drt-personNameBox1 {
        padding-bottom: 0;
        border-right: none;
    }

    .drt-personList .drt-personImg {
        display: block;
        float: none;
        margin: 0 auto;
    }

    /*grid mode*/
    .drt-personGrid .drt-personBox.uk-width-large-1-4 > div.uk-clearfix {
        height: 320px;
        width: 60%;
        margin: 0 auto;
    }
}

@media only screen and (max-width : 580px) {
    /*grid mode*/
    .drt-personGrid .drt-personBox.uk-width-large-1-4 > div.uk-clearfix {
        width: 100%;
    }
}

@media only screen and (max-width : 450px) {
    /*grid mode*/
    .drt-personGrid .drt-personBox.uk-width-large-1-4 > div.uk-clearfix {
        height: 260px
    }
}