@font-face {
    font-family: 'IRANSans';
    src: url('../fonts/IRANSans-web.eot');
    src: url('../fonts/IRANSans-web.eot?#iefix') format('eot'), /* IE6–8 */
    url('../fonts/IRANSans-web.woff2') format('woff2'), /* Chrome36+, Opera24+*/
    url('../fonts/IRANSans-web.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/IRANSans-web.ttf') format('ttf');
    font-weight: normal;
}

body {
    padding: 0;
    margin: 0;
    direction: rtl;
    background: #f1f1f1;
    font-family: 'IRANSans',Tahoma;
    font-size: 11pt;
}

.head {
    background: #2196f3;
    width: 100%;
    height: 350px;
}

    .head div {
        background: #03a9f4;
        width: 50%;
        height: inherit;
    }

.logo {
    text-align: center;
    margin-top: -300px;
}

    .logo img {
        width: 128px;
        height: 128px;
    }

.title {
    text-align: center;
    margin: 0 0 15px 0;
    color: #fff;
    font-size: 26px;
}

.box {
    background: white;
    border-radius: 15px;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    margin: auto;
    padding: 15px;
}

    .box div span {
        display: block;
    }

    .box div input[type=text], .box div select {
        border: solid 1px #dfdfdf;
        background: #f9f9f9;
        font-family: 'IRANSans',tahoma;
        font-size: 16px;
        margin: 5px 0;
        direction: ltr;
        text-align: left;
    }

#btnShortenUrl {
    font-family: 'IRANSans',tahoma;
    background: #2196f3;
    color: white;
    border: none;
    width: 140px;
    margin: auto;
    display: block;
    padding: 10px;
    font-size: 15px;
    border-radius: 5px;
    box-shadow: 0px 3px rgba(0, 0, 0, 0.12);
    margin-bottom: 20px;
    cursor: pointer;
}

    #btnShortenUrl:hover {
        background: #03a9f4;
    }

    #btnShortenUrl:active {
        background: #3dc0fc;
    }

.col2 {
    width: 50%;
    float: right;
    margin-bottom: 30px;
    text-align: center;
    margin-top: 30px;
}

#message {
    font-size: 13px;
}


/*---------Onlu on pc=---------------*/
.only-pc-back {
    background-color: #00BCD4;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.only-pc-img-wrapper {
    max-width: 500px;
    height: 100%;
    position: relative;
    margin: auto;
}

    .only-pc-img-wrapper img {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

.only-pc-desk {
    background-color: #e8ceab;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 240px;
}

.on-pc-url-wrapper {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    text-align: center;
    background: #00bcd4;
    padding: 0 15px;
}

    .on-pc-url-wrapper div {
        max-width: 400px;
        border: solid 3px #fff;
        margin: auto;
        padding: 10px;
        border-radius: 15px;
        color: #fff;
        text-align: center;
        font-size: 26px;
    }

    .on-pc-url-wrapper > span {
        margin: 10px 15px 0 15px;
        display: block;
        color: #fff;
    }

        .on-pc-url-wrapper > span > span {
            font-size: 11px;
        }