/*!
 * Start Bootstrap - SB Admin 2 v4.0.7 (https://startbootstrap.com/template-overviews/sb-admin-2)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-sb-admin-2/blob/master/LICENSE)
 */

/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
 
.ful_login {
    display: flex;margin-bottom: 25px;
}
.card_rnd {border-radius:5rem;}
h4.form_hd {padding: 17px 0 12px;    color: #ea93be;}
.btn-primary{margin-bottom:20px;}

.form-center-dt {
    background: #d6d8de;
    margin: 0 auto 25px;
    padding: 15px 20px;border-radius:5px;
}

.form-center-details{background: #d6d8de;
    margin: 0 auto 25px;
    padding: 25px 38px;border-radius:5px;}


 .file_upld img{
  max-width:200px;
}
.file_upld input[type=file]{
padding:10px;
background:#2d2d2d; margin-right:20px;}

/****************** Register page **************/
.toggle_widg {display:flex;
    align-items: center;justify-content: center;
}

.toggle_widg .toggle.btn {
    margin-left: 10px;
    margin-top: 10px;
   padding:6px 12px;
}

.toggle-on.btn{padding-right:15px;}
.toggle-off.btn{padding-left:15px;}
.toggle_widg .btn{border-radius:2.35rem;font-size: 15px;
    line-height: 1.2;}

.toggle_widg .btn-primary{margin-bottom:15px; height: 100%;}
.toggle_widg .btn-info{margin-bottom:15px;height: 100%;}

.toggle_widg .btn-primary:hover{height: 100%; background-color: #295df7;}
.toggle_widg .btn-info:hover{height: 100%; background-color: #0a6e7b!important;}\

.chk_dl{text-align: center !important; width:100%;}
.label-success{background-color: #1b4f9a!important;}
.label-info{background-color: #36b9cc!important;}

/**************** ***********************/
@base:#212121;
@color:silver;
@accent:#27ae60;
@borderRadius:4px;

.twoToneCenter {
    text-align:center;
    margin:1em 0;
}
.twoToneButton {
    display: inline-block;
    border:1px solid darken(@base,50%);
    outline:none;
    padding:10px 20px;
    line-height: 1.4;
    background: @base; 
    background: linear-gradient(to bottom,  lighten(@base,20%) 0%,lighten(@base,15%) 50%,darken(@base,5%) 51%,darken(@base,2.5%) 100%);      
    border-radius: @borderRadius;
    border: 1px solid darken(@base,30%);
    color:lighten(@color,10%);
    text-shadow: darken(@color,80%) -1px -1px 0px;
    
    position: relative;
    transition: padding-right .3s ease;
    font-weight:700;
    box-shadow:0 1px 0 lighten(@base,30%) inset, 0px 1px 0 lighten(@base,10%);
    
}

.twoToneButton:hover {
    box-shadow:0 0 10px darken(@base,10%) inset, 0px 1px 0 lighten(@base,10%);
    color:lighten(@color,20%);
}

.twoToneButton:active{
    box-shadow:0 0 10px darken(@base,10%) inset, 0px 1px 0 lighten(@base,10%);
    color:lighten(@color,30%);
    background: darken(@base,10%); 
    background: linear-gradient(to bottom,  lighten(@base,10%) 0%,lighten(@base,5%) 50%,darken(@base,5%) 51%,darken(@base,10%) 100%);  
    
}

.twoToneButton.spinning {
    background-color: @base;
    padding-right: 40px;
}
.twoToneButton.spinning:after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 0;
    height: 0;
    box-shadow: 0px 0px 0 1px darken(@base,10%);
    position: absolute;
    border-radius: 50%;
    animation: rotate360 .5s infinite linear, exist .1s forwards ease;
}

.twoToneButton.spinning:before {
    content: "";
    width: 0px;
    height: 0px;
    border-radius: 50%;
    right: 6px;
    top: 50%;
    position: absolute;
    border: 2px solid darken(@base,40%);
    border-right: 3px solid @accent;
    animation: rotate360 .5s infinite linear, exist .1s forwards ease ;
    
}



@keyframes rotate360 { 
    100% {
        transform: rotate(360deg);
    }
}
@keyframes exist { 
    100% {
        width: 15px;
        height: 15px;
        margin: -8px 5px 0 0;
    }
}



/***************** Responsive ******************/


@media(max-width:768px){
.ful_login {
    display: flex;
}
}
 @media(max-width:500px){
 	body{font-size:15px;}
 .form-control{font-size:15px;}
  .form-center-details{padding: 20px 15px;}

 }


 @media(max-width:360px){
 body{font-size:14px;}
 .form-control{font-size:14px;}
  .form-center-details{padding: 20px 18px;}

 }