/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : Sep 3, 2016, 3:33:05 PM
    Author     : igl
*/


/* Remove margins and padding from the list, and add a black background color */

.row{
background-color: #fff;
box-shadow:2px 2x 2px 4px #111;
}

#full_bg{
    background-image: url("../../unicodeconverter.info/img/body_background.jpg");
}
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

.login_site_bar{
  width: 30%;
  height: 260px;
  float: left;
  border-radius: 5px;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}


/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
    ul.topnav li:not(:first-child) {display: none;}
    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
    ul.topnav.responsive {position: relative;}
    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.topnav.responsive li {
        float: none;
        display: inline;
    }
    ul.topnav.responsive li a {
        display: block;
        text-align: left;
    }
}

.othersite{
    margin: 5px 0px 0px;
}
.othersite img{
    border:2px solid green;
    border-radius:5px;
    padding:3px;
    width: 100%;
    height: 45px;
}
.othersite img:hover{
    border-color: red;
}
.freesms{
    text-align: center;
}
.freesms h1 a{
    color: #333300;
    font-weight: bold;
    font-family: initial;

}
.helpfulttl{
    color: #fff;
    align-content:center;
    padding: 10px;
    background: #006666;
    font-family: serif;
    font-weight: 900;
}

.container{
    padding: 0px;
    /* background: #fff; */
}


/*login start coustomize style */
.login_section{

  max-width: 44%;
  /*background-image:
  linear-gradient(to right, rgba(0, 128, 0, 0.41), rgba(254, 0, 0, 0.41));*/
  background-repeat: no-repeat
      no-repeat,
      no-repeat;
  background-position: bottom right,
      left,
      right;
    float: left;
    overflow: hidden;
    border-radius: 5px;
    margin-left: 0.5%;
    border:1px solid #008000;
}
#orangeButton {
    background-color: orange;
    font-weight: 600;
    color: black;
    cursor: hand;
    height: 50px;
}
.select_country{height:45px; display: block;width: 100%;padding-left: 52px;}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
    background: white;
}
.bootstrap-select>.dropdown-toggle {
    width: 100%;
    border-radius: 0;
    padding-right: 25px;
    border: 0;
    color: #fff;
    background-color:green;
    border: 1px solid #008000;
    z-index: 1;
}
.selected active{
    background: green;
}
.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    text-align: left;
    height: 25px;
    font-size: 14px;
    color: black;
    margin-top: 7px;
    background: green;
}
.login_section h2{/*background: #008000;*/ margin: 0; font-size: 26px;color: #008000;font-weight: bold; padding: 10px 0;text-align: center;}
.login_inner{padding: 27px 42px 10px;border: none; box-shadow:none;}
.login_inner p{position:relative;}
.login_inner p i{position: absolute;left: 0;background: #008000; top: 0; font-size: 19px; height: 100%; width: 50px;text-align: center;
    font-size: 26px;
    padding-top: 9px;
    color: #fff;
 }
.login_inner input{width: 100%;height: 45px;border: none;box-shadow: none; font-size: 16px;color: #4F4F4F; padding-left: 58px;border: 1px solid #008000;}
.btn_login{background: #008000; padding:0 5px!important; color: #fff!important; font-size: 16px!important; font-weight: bold!important;opacity: 0.8;-webkit-transition: 0.4s all;-o-transition: 0.4s all;transition: 0.4s all; border: 2px solid transparent;position: relative;-webkit-transition: 0.4s all;
-o-transition: 0.4s all;
transition: 0.4s all;}
.btn_login:hover{background: #006666;}
/*.btn_login:hover{border:2px solid rgba(253, 1, 1, 0.41);}*/


.btn_col{float:left; display: block; width: 60%; padding-left: 19px; }
.btn_col_l{width: 40%;float: left; font-size: 21px; text-align: center; color: #fff;}
.btn_col a{color: #FD0101; text-decoration: none;opacity: 0.5;}
.btn_col a:hover{opacity:1;text-decoration: none; color: #FD0101; }

/*start registation section */
.registation_section{
    max-width:1170px; margin: auto;
    background: url("../../unicodeconverter.info/img/body_background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: bottom right, left,
    right; margin:20px auto;
}
.parent_login{
 max-width: 431px;
padding: 15px 4px;
background: #fff;
border-radius: 10px;
}

.registation_top{
 /*background-image: linear-gradient(to right,  rgba(170, 60, 237, 0.41), rgba(254, 0, 0, 0.41));*/
 background: #008000;
 background-repeat: no-repeat,
 no-repeat,
 no-repeat;
 background-position: bottom right,left;
 text-align:center;
 padding-top: 13px;
 padding-bottom: 5px;
}
.registation_top h2{margin: 9px 0;color: #fff;}
.registation_top i {     width: 50px; height: 50px; color: #fff; font-size: 25px; border: 2px solid #fff; border-radius: 50%; font-weight: bold; padding-top: 10px;}

.input_field{padding: 15px 20px;max-width: 700px; margin: auto;}
.input_field:after{content:""; display: block; clear: both;}
.input_field p:after{content:""; display: block; clear: both;}
.input_field .col_2{margin-left:-15px; margin-right: -15px;}
.input_field input{width: 100%; height: 45px;box-shadow: none; border: none; padding-left: 60px;border: 1px solid #008000;}
.input_field .col_r_f{float: left;width: 45.65222%;}
.input_field .col_r_f{margin: 0 15px; position: relative;}

.input_field p{position: relative;}
.input_field i{position: absolute; left: 0; height: 100%; width: 50px; font-size: 22px; background: #008000; color: #fff; font-weight: bold; text-align: center; padding-top: 10px;top: 0;}
/*end registation section */
/*login end coustomize style*/

/* start top menu*/
.lo_to_nav{margin: 0;padding: 0;text-decoration: none; color:#000;list-style: none;margin-bottom: 5px; margin-left: 27px;}
.lo_to_nav:after{content:""; display: block; clear: both;}
.lo_to_nav li{float: left;}
.lo_to_nav li a{text-decoration: none; color: #116492; font-size: 14px;display: block; padding: 0px 8px;-webkit-transition: 0.4s all;
-o-transition: 0.4s all;
transition: 0.4s all;}
.lo_to_nav li:first-child a{padding-left: 0;}
.lo_to_nav li a:hover{color: #FE0100;}
/*start style top user menu*/
.top_user_menu{height:35px;background: green;}
.top_user_menu .container{background: none; color: #fff;}
.top_user_menu:after{content:""; display: block; clear: both;}






/*end top style menu user */
.ourt_profile{text-align: center;}
.ourt_profile ul{list-style: none;}
.ourt_profile ul:after{content:""; display: block; clear: both;}
.ourt_profile ul li{float: left; padding:0px 15px; padding-top: 2px;}
.ourt_profile ul li:first-child{padding:0px 0px;}
.ourt_profile ul li a{text-decoration: none;-webkit-transition: 0.4s all;
-o-transition: 0.4s all;
transition: 0.4s all; color: #fff; font-size: 12px}
.log_out_top{position: absolute; right: 0; top: 13px;}

.log_out_top a{color: #333; font-size: 12px;-webkit-transition: 0.4s all;
-o-transition: 0.4s all;
transition: 0.4s all;display: block; position: relative; color: #fff;padding-top: 37px;}
.log_out_top a:before{
    content: "\f08b";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:50%;
    position:absolute;
    top:4px;
    font-size: 25px;
    transform: translateX(-50%);
    color: #008000;

 }
.log_out_top a:hover{text-decoration: none; color: #008000;}
/*end top ment*/

/*start user profile section*/
/* .user_profile{padding-bottom: 24px;background:#90EE90;}
.user_profile h2{font-size: 37px; text-align: center; margin: 0; color: #008000;font-weight: bold;text-shadow: 4px 4px 8px rgba(0,0,0,0.4);}
.user_profile h2>span{color: #FE0000;}
.user_profile .inner_col{float:left; padding: 15px;width:33.33%;}
.user_profile .inner_col:after{content:""; display: block; clear: both;}
.user_updat{background:#008000; font-size: 18px; margin-top: 10px; padding: 10px 15px; text-decoration: none;color: #fff; text-align: center;position:relative;}
.user_updat:hover{text-decoration: none;color: #fff;}
.user_updat:after{content:""; display: block; width: 100%; position: absolute; height: 0; background: #FD0000;left: 0; bottom: 0;-webkit-transition: 0.4s all;
-o-transition: 0.4s all;
transition: 0.4s all;}
.user_updat:hover:after{height: 3px;}
.profle-inner i{font-size: 65px;color: #eaeaea; text-shadow:4px 4px 8px rgba(0,0,0,0.4)}

.user_profile .left_icon{float: left; padding-right: 10px;width: 30%; text-align: center;}

.user_profile .pro_text{float: left; padding-left: 10px; width: 70%;padding-top: 13px;text-align: left;}
.user_profile .pro_text p{font-size: 14px; color: #000;}
.user_profile .pro_text p>span{font-size: 18px;display: block;}
.update_botn{margin:auto; margin-top:37px;background:#008000; color:#fff; padding: 10px 15px;}
.update_botn:hover{background: #FC0000; color: #fff;box-shadow: 4px 4px 8px rgba(0,0,0,0.4);text-decoration: none;} */

/* input[type=submit]{border: none;box-shadow: none; margin-top: 0;} */
/* .user_profile .select_country{padding-left: 8px;box-shadow:4px 4px 8px rgba(0,0,0,0.4);border-radius:4px;}
.h_up_s .row{padding-left: 15px;} */
/* .h_up_s input[type="text"]{box-shadow:4px 4px 8px rgba(0,0,0,0.4);border-radius:4px;width:100%;height: 44px;padding-left: 12px;padding-right: 10px; border: none;} */
/* .h_up_s .left_icon{padding-top:20px!important; width: 20%;}
.h_up_s .left_icon i{font-size: 48px;}
.h_up_s .inner_col{width: 55%; padding: 0!important;}
.user-drp-manu{ width: 209px;} */

/* .text {
    font-family: solaimanLipi,arial;
    font-size: 15px;
    line-height: 22px;
} */

.forgotten_text a{
    color:black;
}


/*End user Profile*/

.display-control {
    width: 30%;
    height: 260px;
    float: left;
    border-radius: 5px;
}

.login_section {
    max-width:100%;
    width: 39%;
    background: url("../../unicodeconverter.info/img/body_background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 5px;
    /*background-image: linear-gradient(to right, rgba(0, 128, 0, 0.41), rgba(254, 0, 0, 0.41));*/
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: bottom right, left, right;
    float: left;
    overflow: hidden;
    border-radius: 5px;
    margin-left: 0.5%;
    border: 1px solid #008000;
}

/* On screens that are 480px or less, set the background color to olive */

@media screen and (max-width:800px) {
    .input_field .col_2 {
      width: 100%;
    }

   .login_site_bar{
     display:none;
    }
    .login_section{
        max-width:100%;
        width:100%;
    }

    .input_field .col_2 .col_r_f {
      float: left;
      width: 100%;
      margin-bottom:6px;
    }

}