@font-face {
  font-family: Brush Script MT;
  src: url(fonts/BrushScriptStd.otf);
}
@font-face {
  font-family: SelfDeception;
  src: url(fonts/SelfDeceptionRegular-ALLWA.ttf);
}


body{   margin:0;        font-family: 'Open Sans', sans-serif;}

.main-widget{width:100%;height:auto;  min-height:calc(100vh - 72px);  background-image: url(../images/main-bg.png);  background-position: center; background-size: cover; background-repeat: no-repeat;  margin:0px; display: flex; flex-direction: column;}
.header-panel{    display: flex;    flex-direction: column;}
.truck-logo img{    margin: 25px;     margin-bottom:0px;}
.main-logo{    text-align: center;    padding: 40px;    padding-top: 0px;}
.main-logo img{    max-width:80%;}
.login-panel{    display: flex;    flex-direction: column;    text-align: center;    align-items: center;}
.login-sections{    width:560px;    height:250px;    border:1px solid #555;    background: #fff;    display: flex;    flex-direction: row;}
.login-btn-sec{    width:30%;    border-right:1px solid #555;}
.login-form-sec{    width:70%;}
.login-btn{   width:100%;    display:flex;    text-align: center;    align-items: center;    justify-content: center;    height:calc(250px / 3);    cursor:pointer;        flex-direction: column;}
.login-btn:nth-child(1),.login-btn:nth-child(2){    border-bottom:1px solid #555;}
.login-btn.active{    color:#fff;    background:#4b6cb7;}
.login-btn .btn-ico{    width: 25px;    height: 25px;    background-size: contain !important;}
.user-icon{    background: url('../images/Black\ User.png');}
.login-btn.active .user-icon{    background: url('../images/White\ User.png');}
.cust-icon{    background: url('../images/Customer\ Login\ Balck.png');}
.login-btn.active .cust-icon{    background: url('../images/Customer\ Login\ White.png');}
.driver-icon{    background: url('../images/Driver\ Login\ Black.png');}
.login-btn.active .driver-icon{    background: url('../images/Driver\ Login\ White.png');}
.btn1-sec,.btn2-sec,.btn3-sec{    display: none;    flex-direction: column;}
.btn1-sec.active{    display:flex;}
.btn2-sec.active{    display:flex;}
.btn3-sec.active{    display:flex;}
.input-field-text{    padding: 0px 20px;    margin: 10px 0px;    width: calc(100% - 82px);    position:relative;}
.input-field-btn{    padding: 0px 20px;    margin: 20px 0px;}
.input-field-text input{    width: 100%;    height: 28px;    padding-left: 40px;    background: #D7D7D7;    border:0px;}
.input-field-text .user-icon{    background: url(../images/Black\ User.png);    position: absolute;    left: 27px;    top: 4px;    z-index: 2;    width: 23px;    height: 23px;    background-size: contain;}
.input-field-text .pass-icon{    background: url(../images/Password\ Black.png);    position: absolute;    left: 27px;    top: 4px;    z-index: 2;    width: 23px;    height: 23px;    background-size: contain;}
.input-field-btn input{    width: 100%;    height: 30px;    background: #4b6cb7;    border:0px;    color:#fff;    font-size: 18px;    cursor:pointer;}
.powered_by{    width: 200px;    text-align: center;        font-family: 'Brush Script MT', cursive;	padding-top:77px;font-size:25px;}
/*.powered_text{    padding-left:15px;}*/
.isoft-logo{    background: #fff;    text-align: center;    padding: 5px;    border-radius: 45px;}
.pb-img1{    width: 105px;    position: relative;    top: -7px;}
.pb-img2{    width: 72px;}
/*.footer-panel{font-family:'Myriad Pro Light'; width:100%; height:70px; display: flex;flex-direction: column;color:#fff; text-align: center;align-items: center;justify-content: center;background: linear-gradient(to top, #4b6cb7 0%, #182848 100%);}
.footer-panel div{    width:50%;    justify-content: center;}
.footer-panel img{    width:150px;}
.footer-panel .powered{    display:flex;    text-align: center;    align-items: center;    justify-content: center;}*/

.developed_by {
    width: 300px;
    text-align: center;
    font-family: 'Brush Script MT', cursive;
  
    font-size: 25px;
}
.developed_text {
    width: 300px;
    text-align: center;
    font-family: 'Brush Script MT', cursive;
    padding-top: 68px;
    font-size: 25px;
}
.footer-panel{
    
    width:100%;
    height:70px;
 background: linear-gradient(to top, #4b6cb7 0%, #182848 100%);
    display: flex;
    flex-direction: row;
    color:#fff;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.footer-panel div{
    width:75%;
    justify-content: center;
}

.footer-panel img{
    width: 90px;
}

.footer-panel .powered{
    display:flex;
    width:25%;
    text-align: center;
    align-items: center;
    justify-content: center;
}