/* ----------------------------------
	1. Reset default browser styles
	2. Basic classes and elements 
	3. Color Scheme
	4. Typography
	5. Header
	6. Sliders
	7. Tabs
	8. Carousels
	9. Twitter Feed
	10. Lists and navigations
	11. Buttons
	12. Tables
	13. Icons
	14. Main content elements
	15. Forms
	16. Footer
	17. Animations
	18. Responsive changes
	19. Retina ready
-------------------------------------*/
/*1Reset default browser styles ------------------------------------- */ 
* {
margin: 0;
padding: 0;
border: none;
}

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video, main {
    display: block;
}

mark, rp, rt, ruby, summary, time {
    display: inline;
}

a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var {
    background: transparent;
    border:none;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
}

a{
    text-decoration: none;
}

b, strong {
    font-weight: bold;
}

ul, ol {
    list-style: none;
}

q {
    quotes: none;
}

table, table td {
    padding: 0;
    border: none;
    border-collapse: collapse;
}

img {
    vertical-align: top;
    max-width: 100%;
}

embed {
    vertical-align: top;
}

input, button {
    /*	-webkit-appearance:none;*/
    outline: none;
}

    button::-moz-focus-inner {
        border: 0;
    }

html, body {
    height: 100%;
}


/* -----------------------------------

	2. Basic classes and elements 

------------------------------------- */
body {
    font: 500 14px/21px "Open Sans",Arial,sans-serif;
    color: #58595b;
    background: #fff;
    letter-spacing: 0.1px;
}

.clear {
    clear: both;
    /*overflow: hidden;*/
}
/*Margin*/
.pad-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.m_left_0 {
    margin-left: 0 !important;
}

.m_right_0 {
    margin-right: 0 !important;
}

.m_left_5 {
    margin-left: 5px;
}

.m_left_10 {
    margin-left: 10px;
}

.m_left_15 {
    margin-left: 15px;
}

.m_left_20 {
    margin-left: 20px;
}

.m_left_40 {
    margin-left: 40px;
}

.m_right_5 {
    margin-right: 5px;
}

.m_right_6 {
    margin-right: 6px;
}

.m_right_8 {
    margin-right: 8px;
}

.m_right_10 {
    margin-right: 10px;
}

.m_right_15 {
    margin-right: 15px;
}

.m_right_20 {
    margin-right: 20px;
}

.m_right_25 {
    margin-right: 25px;
}

.m_right_29 {
    margin-right: 29px;
}

.m_right_30 {
    margin-right: 30px;
}

.m_right_35 {
    margin-right: 35px;
}

.p_bottom_0 {
    padding-bottom: 0 !important;
}

.m_bottom_0 {
    margin-bottom: 0 !important;
}

.m_bottom_3 {
    margin-bottom: 3px;
}

.m_bottom_5 {
    margin-bottom: 5px;
}

.m_bottom_10 {
    margin-bottom: 10px;
}

.m_bottom_12 {
    margin-bottom: 12px;
}

.m_bottom_15 {
    margin-bottom: 15px;
}

.m_bottom_20 {
    margin-bottom: 20px;
}

.m_bottom_25 {
    margin-bottom: 25px;
}

.m_bottom_30 {
    margin-bottom: 30px;
}

.m_bottom_35 {
    margin-bottom: 35px;
}

.m_bottom_40 {
    margin-bottom: 40px;
}

.m_bottom_45 {
    margin-bottom: 45px;
}

.m_bottom_50 {
    margin-bottom: 50px;
}

.m_bottom_60 {
    margin-bottom: 60px;
}

.m_bottom_65 {
    margin-bottom: 65px;
}

.m_bottom_100 {
    margin-bottom: 100px;
}

.m_top_0 {
    margin-top: 0px !important;
}

.m_top_5 {
    margin-top: 5px;
}

.m_top_10 {
    margin-top: 10px;
}

.m_top_20 {
    margin-top: 20px;
}

.m_top_30 {
    margin-top: 30px;
}

.m_top_40 {
    margin-top: 40px;
}

.m_top_50 {
    margin-top: 50px;
}

.m_top_100 {
    margin-top: 100px;
}

.fl_right {
    float: right;
}

.fl_left {
    float: left;
}
.pad-50{
padding:50px 0;
}


/************************** index starts**************************/
.back-bg {
background: url('../phonafriendimage/Admin/back.png') no-repeat 50% 0;
background-size:cover;
height:100vh;
}
.admin_rope img {
    width: 56px;
    height: 265px;
}

.rope {
    margin-left: 40px;
}

.rope2 {
    float: right;
    margin-right: 30px;
    position: relative;
    z-index: 100;
}

.admin-panel {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position:relative;
    top:50%;
    transform:translateY(50%);
}

.form_area {
    width: 100%;
    height: auto;
    background: rgba(255,255,255,0.8);
    background-repeat: no-repeat;
    position: relative;
    box-shadow: 2px 2px 4px #000000;
    border-radius:5px;
}
.server_box {
    width: 550px;
    height: auto;
    background: #fff;
    background-repeat: no-repeat;
    position: relative;
    box-shadow: 2px 2px 4px #000000;
    border-radius: 5px;
    text-align: center;
    padding: 25px 10px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.server_box h2{
    font-size:22px;
    color:#000;
    margin:20px 0 0;
    line-height:30px;
}

.form_area div {
    padding: 15px;
    text-align: center;
}

    .form_area input.text-box {
        height: 44px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

.form_area_button {
    background-color: #0fda0c;
    border:1px solid #0db90d;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
}

.forget-button {
    text-decoration: none;
    color: #000000;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    background: none;
    border: none;
}

.point2 {
    width: 671px;
    height: 338px;
    background-color: #FFFFFF;
    -ms-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
    background-repeat: no-repeat;
    position: absolute;
    box-shadow: 2px 2px 4px #000000;
}

.base3 {
    width: 671px;
    height: 338px;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    -ms-transform: rotate(-4deg);
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
    background-repeat: no-repeat;
    position: absolute;
    box-shadow: 2px 2px 4px #000000;
}

.modal-dialog {
    width: 400px;
    margin: 20% auto;
}

.pad-lft-none {
    padding-left: 0 !important;
}

/************************** index ends**************************/
/************************** header ends**************************/
.header {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
    width: 100%;
}

.admin_header {
    /*position: relative;*/
    margin: 0px;
    padding: 0px;
    background: #00468d;
    width: 100%;
    height: 60px;
}
.ad_log_sec {
    padding:12px 15px 0 0;
}

.ad_log_sec a {
    color: #fff;
    padding: 8px 20px;
    border-radius: 24px;
}

.admin_header h1, .header h1 {
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.custom-menu {
    list-style: none;
    /* margin: 30px auto 0px auto; */
    height: 43px;
    margin: 0px auto;
    /* padding: 0px 20px 0px 20px; */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #014464;
    background: -moz-linear-gradient(top, #0272a7, #013953);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
    border: 1px solid #002232;
    -moz-box-shadow: inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow: inset 0px 0px 1px #edf9ff;
    box-shadow: inset 0px 0px 1px #edf9ff;
}

.navbar-default .navbar-nav > li > a {
    color: #fff;
    padding: 10px 25px;
}

    .navbar-default .navbar-nav > li > a:hover {
        color: #eee;
    }
/************************** header ends**************************/
/************************** mobileno starts**************************/
.mobile-box {
    background: #fff;
    width: 100%;
    padding: 20px;
    box-shadow: 0 0 7px #222;
    color: #222;
    border-radius: 4px;
    margin-top: 20%;
}

    .mobile-box p {
        font-weight: bold;
        text-align: center;
        font-size: 16px;
        margin-bottom: 15px;
    }

    .mobile-box label {
        margin-bottom: 15px;
    }

.m-top10 {
    margin-top: 10%;
}

.m-top7 {
    margin-top: 7%;
}

.margin-top-20 {
margin-top:20px;

}

.date-picker {
    display: inline-block;
    width: 60%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}




.excutive-table, .excutive-table tr > th, .excutive-table tr > td {
    border: 1px solid #999 !important;
}

    .excutive-table tr > td a {
        border-radius: 4px;
        margin: 0 10px;
        color: #fff;
    }

.chat-image-box {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin-left: 15px;
}

.age-txt-box {
    width: 80%;
    display: inline-block;
    margin-right: 5px;
}

.radio-table td {
    padding: 0 20px;
}

 .radio-table td label {
        margin-left: 10px;
    }

.PagerStyle table td {
    padding: 0 5px;
}

.PagerStyle table td a {
        background: #00aeff;
    }

.today-headlines {
    font-size: 22px;
    margin: 20px 0;
    color: #222;
    text-transform: uppercase;
}

.m-top-0 {
    margin-top: 0;
}

.table_retailer tr {
    background-color: transparent !important;
}

.table_retailer td {
    color: #222;
}

.table_retailer th {
    background-color: #00468D;
}

.p_bottom_50 {
    padding-bottom: 50px;
}

.purchase_box a {
    height: 21px !important;
}

.purchase_box table {
    margin-left: auto;
    margin-right: auto;
    margin-top: 35px;
}

.purchase_box tr {
    height: 50px;
}

.purchase_box_input {
    margin-left: 20px;
}

.admin_pro_input {
    width: 250px;
    display: inline-block;
}

.admin_pro_button {
    margin: -5px 0 0 10px;
}

.female_pro_area h1 {
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    margin-bottom: 15px;
}

.female_pro_area table {
    margin-left: auto;
    margin-right: auto;
}

.female_pro_area tr {
    height: 50px;
}

.female_pro_input {
    margin-left: 20px;
}

.height_scroll {
    height: 150px;
    overflow-y: scroll;
}

.mobile_valid {
    position: absolute;
    top: 8px;
    right: 0px;
}

.popupcross {
    position: absolute;
    top: 10px;
    right: 0px;
}

.vr_line {
    border-right: 1px solid #ccc;
}

.hr {
    background: #ccc;
    width: 1px;
    height: 110vh;
    float: left;
    margin: 0;
}

.giftshow_area {
    padding: 20px;
    border: 1px solid #58595b;
    background-color: #eee;
}

.giftshow td {
    padding: 20px 10px;
}

.giftshow {
    margin-left: auto;
    margin-right: auto;
}

.giftimg_area {
    height: 100px;
    width: 100px;
    overflow: hidden;
}

    .giftimg_area img {
        width: 100%;
        height: auto;
    }

.setbalance tr td {
    border: none !important;
}

.setbalance input {
    width: 200px;
}

.setbalance select {
    width: 200px;
}
.otp-alter{
    display: block;
    position: relative;
    bottom: 40px;
    color: red;
    font-weight: 600;
    font-size: 16px;
}
.admin-login {
    color: red;
    display: block !important;
    margin: -15px 0 5px;
}
.pro-details-box{
background: #fff;
width: 100%;
padding: 20px;
box-shadow: 0 0 7px #999;
color: #222;
border-radius: 4px;
margin:15px 0;
border:1px solid #ddd;
}

/************************** mobileno ends**************************/

.pro_popup {
}

/*============================== media quaries starts==============================*/
@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 1280px) {
}

@media only screen and (min-width: 981px) and ( max-width: 1440px) {
    .custom-menu .navbar-nav{float:none;}
    .navbar-default .navbar-nav > li > a{padding: 10px 16px;}
}


@media only screen and (min-width: 768px) and ( max-width: 980px) {
    .admin_pro_button {
        width: 250px;
        margin-left: 0;
        margin-top: 10px;
        margin-bottom: 20px;
    }
}


@media only screen and (max-width: 767px) {
    .rope2 {
        margin-right: 40px;
    }

    .form_area {
        width: 100%;
    }

        .form_area input.text-box {
            width: 100%;
        }

    .admin-panel {
        width: 100%;
        margin-top: -20%;
    }

    .modal-dialog {
        width: 100%;
    }

    .navbar-collapse {
        background: #eee !important;
        background: -moz-linear-gradient(top, #eee, #fff) !important;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#fff)) !important;
        position: absolute;
        width: 100%;
        z-index: 30;
    }

    .navbar-default .navbar-nav > li > a {
        color: #333;
    }

        .navbar-default .navbar-nav > li > a:hover {
            color: #111;
        }

    .radio-table td {
        padding: 0 10px;
    }

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

    .purchase_box tr {
        display: grid;
        margin-top: 15px;
    }

    .purchase_box table {
        margin-left: unset;
        margin-right: unset;
        margin-top: 35px;
        width: 100%;
    }

    .admin_pro_button {
        width: 250px;
        margin-left: 0;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .female_pro_input {
        margin-left: 0;
    }


    .purchase_box_input {
        margin-left: 0;
    }

    .female_pro_area tr {
        display: grid;
        margin-top: 15px;
    }

    .vr_line {
        border-right: none;
    }
}

@media only screen and (max-width: 480px) {
    .date-picker {
    width: 55%;
    }
    .get-request-btn {
    padding:6px;
    }
}

@media only screen and (max-width: 360px) {
    .get-request-btn {
    display:block;
    margin:5px auto 0;
    }
    .date-picker {
    width: 60%;
    }

}

@media only screen and (max-width: 320px) {
}

/*============================== media quaries ends==============================*/