:root {
    --color-main: #0876AB;
    --color-red: #B81414 !important;
    --color-orange: orange !important;
    --color-yellow: #B8A814 !important;
    --color-green: #27a59b;
    --color-blue: #0061a5;
}


/* #region font */
@font-face {
    font-family: font-main;
    font-weight: normal;
    src: url('fonts/Vazir-Regular-FD.woff') format('woff');
}

@font-face {
    font-family: font-main;
    font-weight: bold;
    src: url('fonts/Vazir-Bold-FD.woff') format('woff');
}


/* #endregion */

/* #region html tag */

body {
    background-color:#FFF !important;
    font-family: font-main !important;
    font-size: 12pt !important;
    padding: 0px !important;
    margin: 0px !important;
}


img {
    max-width: 100%;
}

a, a:visited, a:active {
    text-decoration: none;
    color: #222;
}

    a:hover {
        color: var(--color-main);
    }


/* #endregion */

/* #region public class */
.dir
{
    direction:ltr !important;
}


.center{
    text-align:center !important;
}

.right{
    text-align:right !important;
}

.left{
    text-align:left !important;
}

a.lnk, a.lnk:visited, a.lnk:active {
    display: inline-block;
    padding: 0px 35px;
    text-align: center;
    border: 2px solid var(--color-blue);
    color: var(--color-blue);
    margin: 5px;
    font-size:12pt !important;
    background-color:rgba(255,255,255,0.5);
}

    a.lnk:hover {
        background-color: var(--color-main);
        color: #FFF;
    }

/* #endregion */

/* #region page */
.page-top
{
    background-color:#FFF;
    box-shadow:0px 0px 10px #DDD;
    padding-bottom:10px;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    z-index:200;
}


.page-top h1
{
    display:inline-block !important;
    font-size:24pt !important;
    font-weight:bold !important;
    margin:0px !important;
    margin-right:10px !important;
    padding:0px !important;
    color:var(--color-main);
}

.page-bottom{
    border-top:1px solid #ccc;
    padding:30px 0px;
    background-color:#F7F7F7;
}


.page-bottom h1 {
    font-size:28pt !important;
    color:var(--color-main);
    letter-spacing:3px;
}

    .page-bottom h2 {
        font-size: 16pt !important;
        line-height:125% !important;
    }

    .page-bottom hr {
        border:none !important;
        border-top:1px solid #CCC !important;
        margin-top:29px !important;
        margin-bottom:30px !important;

    }
    .page-bottom .text {
        text-align:justify;
        line-height:200%;
    }
/* #endregion */

/* #region pack */
.over-bg {
    position: fixed;
    background-color: rgba(255,255,255,0.75);
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index:250;
    display:flex;
    align-items:center;
    justify-content:center;
}
.over-bg .loading
{
    background-color:#FFF;
    padding:20px;
    line-height:300%;
    text-align:center;
    border-radius:4px;
    box-shadow:0px 0px 15px #DDD;
}


.default-section-1 {
    padding: 20px 0px;
    font-size: larger;
    line-height: 175%;
}


.default-section-2 {
    background-color: #EEF0F2;
    padding: 50px 0px;
}

    .default-section-2 h1 {
        color: var(--color-main);
        font-size: 24pt !important;
        line-height: 150%;
        margin-bottom: 50px;
    }


    .default-section-2 .section {
        background-color: #FFF;
        padding: 40px;
        text-align: justify;
        line-height: 150%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

        .default-section-2 .section h2 {
            color: var(--color-main);
            font-size: 16pt !important;
            font-weight: bold !important;
            line-height: 150%;
            text-align: center;
            margin-bottom: 20px;
        }

        .default-section-2 .section a {
            display: inline-block;
            padding: 10px;
            width: 100%;
            text-align: center;
            border: 2px solid var(--color-blue);
            margin-top: 10px;
        }




.default-section-3 {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.default-section-3 .cover {
    background-color: rgba(255,255,255,0.75);
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 175%;
    font-size: 18pt;
    text-align: justify;
}


.default-section-4 {
    padding:100px 0px;
    text-align:center;
    font-size:18pt;
    color:var(--color-main);
}



.message-stop-box, .message-success-box {
    border: 1px solid #CC0000;
    margin: 10px 0px;
    border-radius: 4px;
    padding: 10px;
    color: #CC0000;
    background-color: #f8dede;
}

.message-success-box {
    border: 1px solid green;
    margin: 10px 0px;
    border-radius: 4px;
    padding: 10px;
    color: green;
    background-color: #e6fae7;
}


.lan {
        background-color: var(--color-main);
        padding:5px 0px;
        margin-bottom:10px;
        font-size:smaller;

}

    .lan a {
        color: #FFF;
        display: inline-block;
        margin: 0px 10px;
    }

    .lan a:hover {
        color: yellow;
    }


/* #endregion */
/* #region user controls */
.uc-default-top {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.uc-default-top .cover {
    background-color:rgba(255,255,255,0.75);
    height:600px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.uc-default-top .cover .text {
    text-align:center;
    font-size: 24pt;
}
.uc-default-top .cover .text h1 {
    font-size:48pt;
    color:var(--color-main);
}

@media (max-width: 768px) {
    .uc-default-top .cover {
        height: 400px;
    }

    .uc-default-top .cover .text h1 {
        font-size : 32pt;
    }
    .uc-default-top .cover .text {
        font-size: 14pt;
    }
}

@media (max-width: 576px) {
    .uc-default-top .cover .text h1 {
        font-size: 24pt;
    }

    .uc-default-top .cover .text {
        font-size: 12pt;
    }
}





.content{

}

.content .top{
    background-color:var(--color-main);
    color:#FFF;
    padding:30px 0px;
    font-size:28pt;
}

    .content .main {
        margin:20px 0px;
        line-height:175%;
    }


    .content img {
        border-radius:6px;
    }


    .content .desc {
        border:2px dashed var(--color-main);
        padding:10px;
        border-radius:6px;
        margin:10px 0px;
    }


    .content .body {
        background-color:#F7F7F7;
        text-align:justify;
        padding: 10px;
        border-radius: 6px;
        margin: 10px 0px;
        line-height:225%;
    }


.share-box
{
    border-radius:6px;
    border:1px solid #ddd;
    display:inline-block;
    padding:10px;
}

.share-box h2 {
    font-size:10pt;
    font-weight:bold;
}


.list-box{
    background-color:#F7F7F7;
    padding:10px;
    border-radius:10px;
    margin-bottom:10px;
}

.list-box:hover {
    box-shadow:0px 0px 5px #DDD;
}

.list-box h2{
    font-size:larger !important;
}


.comment h1{
    border-right:10px solid var(--color-main);
    padding-right:10px;
    font-size:14pt !important;
    font-weight:bold!important;
}

.comment .btn {
    padding:5px 15px;
    background-color:var(--color-main);
    color:#FFF;
    margin:10px 0px;
}

.comment .btn:hover {
    box-shadow:0px 0px 5px #888;
}



/* #endregion */

/* #region bootstrap */
.navbar {
    background-color: #FFF !important;
    height: 100px;
}

@media (max-width: 768px) {
    .navbar-collapse {
        background-color: #EEE;
        position: fixed;
        left: 0px;
        right: 0px;
        top: 122px;
        padding: 0px 10px;
        border-bottom: 1px solid #CCC;
    }
}






/* #endregion */

/* #region bootstrap */

.form
{

}

.form h2
{
    font-size:12pt;
    font-weight:bold;
    margin-top:15px !important;
    margin-bottom:5px !important;
}

    .form h2::after {
        content : " : ";

    }

    .form h2.RF:before {
        content: " * ";
        color:#CC0000;
    }

    .form img {
        border-radius:4px;
    }

    .form input[type=text],
    .form textarea,
    .form select {
        border: 1px solid #888;
        width: 100%;
        border-radius: 4px;
        outline: none;
        padding: 5px 10px;
    }

        .form input[type=text]:focus,
        .form textarea:focus,
        .form select:focus {
            border: 1px solid #222;
        }


    .form .cate-box h1
    {
        font-size:16pt;
        font-weight:bold;
        text-align:center;
        margin-top:20px;
        border-bottom:3px solid var(--color-main);
        padding:5px 0px;
        color:var(--color-main);
    }


    .form input[type=button],
    .form input[type=submit] {
        background-color: var(--color-main);
        padding:5px 15px;
        color:#FFF;
        border-radius:4px;
        border:none;
    }

        .form input[type=button]:hover,
        .form input[type=submit]:hover {
            box-shadow:0px 0px 5px #888;
        }


/* #endregion */