/* added by kamal on 08-05-024 */
#div_btn_register button
{
    background: black;
}

#div_btn_register button:hover
{
    background: green;
}

#reg_header_text
{
    font-size:12px;
}

/*used to alternate color to the div*/
/*comment by racon 23/05/2024, css has no rule for visible row, now will set striped in register4_new.js*/
/*div.container .row:nth-of-type(odd)
{
  background: rgba(0,0,0,.05);
}*/

legend
{
    margin-bottom:0;
}

/* modified by kamal on 08-05-2024 :: used to set the content at the center of the image div */
#mainpic_register {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    display: flex;
    align-items: center;
    margin-bottom:0;
    -webkit-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.25);
    box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.25);
}

/* added by kamal on 08-05-2024 */
#text_under_banner
{
    display: block;
    margin-top: -40px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU5Nzc3RTgyOTUwOTExRTY5NTlGOUI3RjM1MzE4NDFGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU5Nzc3RTgzOTUwOTExRTY5NTlGOUI3RjM1MzE4NDFGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTk3NzdFODA5NTA5MTFFNjk1OUY5QjdGMzUzMTg0MUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTk3NzdFODE5NTA5MTFFNjk1OUY5QjdGMzUzMTg0MUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5mbOzaAAAAp0lEQVR42uzRAQ0AMAgEsTH/0vD02CCkJ+FaSfppTd8CIAICRECACAgQAQEiIAICRECACAgQAQEiIAICRECACAgQAQEiIAICRECACAgQAQEiIAICRECACAgQAQEiIAICRECACAgQAQEiIAICRECACAgQAQEiIAICRECACAgQAQEiIAICRECACAgQAQEiIAICRECACAgQAQEiIEAERECACAgQAbneCDAA0qAEkXQdlL8AAAAASUVORK5CYII=) repeat;
}

/*############################
##		Mobile View: 		##
##							##
##	max-width 0px To 767px 	##
##############################*/
@media only screen and (min-width:0px) and (max-width:767px)
{
    /* added by kamal on 08-05-2024 */
    #reg_header_text
    {
        font-size:18px;
    }

    /* added by kamal on 08-05-2024 :: in mobi view the button will display at the center */
    #div_btn_register
    {
        text-align:center;
    }
    
    /*overwrite update_index_new.css, for registration page, do not set padding*/
    section {padding-left:0; padding-right:0;}

    /*modified by kamal on 08-05-2024*/
    .container{padding:0;}
    .row{margin:0;}

    /* added by kamal on 08-05-2024 */
    #register{font-size:15px;}

    #mainpic_register {background-size:cover;}

    /* modified by kamal on 08-05-2024 :: in mobi width will be 100%$ */
    form#register {padding-left:0 !important;; padding-right:0 !important;; /*max-width:98% !important;*/}
    #mainpic_register {background-position:center top;}
}

/*add by racon 23/05/2024, css of twitter bootstrap, now we do not use twitter bootstrap, set css of twitter bootstrap we need here*/
.form-control-sm {
  height: calc(1.5em + .5rem + 2px);
  padding: .25rem .5rem;
  font-size: .875rem !important;
  line-height: 1.5;
  border-radius: .2rem;
}

.p-2
{
    padding: .5rem !important;
}

.d-none {
  display: none !important;
}

@media (min-width: 768px) {
    .d-md-block {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .d-md-none {
        display: none !important;
    }
}

/*header bar login form alos have row class, set condition to only for registration form */
form#register .row
{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

@media (min-width: 768px) {
  .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (min-width: 768px) {
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

.mt-4, .my-4 {
    margin-top: 1.5rem !important;
}