@import url('https://fonts.cdnfonts.com/css/avenir-lt-std?styles=15286,15281,15283,15279');


:root {
  --orange: #ed1e79;
  --darkOrange: #da2168;
}

button:focus, input:focus {outline: none;}
.btn:focus {box-shadow: none;}
body {font-size:14px; background: #fff; color:var(--black); font-family: 'Avenir LT Std', sans-serif;}
h1,h2,h3,h4 {font-family: 'Avenir LT Std', sans-serif; font-weight: 700;}
img {max-width: 100%;}
.container {max-width: 1270px;}
.mainBg {position: relative;background: url(../images/bg.jpg) no-repeat center / cover; min-height: 100vh; padding: 35px 0px;    display: flex; align-items: center;}

.orangeBtn {background: var(--orange); color: #fff; font-weight: 600; border:none; text-decoration: none; display: inline-block; padding: 10px 20px; text-align: center;border-radius: 3px;}
.orangeBtn:hover {background: var(--darkOrange); color: #fff; text-decoration: none;}

.logo {margin: 0px 0px 40px 0px;}
.leftText { margin: 0px 0px 30px 0px; color: #ccc;}
.leftText .img {width: 280px; margin: 0px 0px 10px 0px;}
.leftText .desc {margin: 0px 0px 10px 0px; font-weight: 300; font-size: 16px;}
.leftText .desc img { vertical-align: bottom;}

.boxBg {background: rgb(0,0,0,0.70); color: #fff; padding: 50px; max-width: 400px; margin:0px auto;  /*max-height: calc(100vh - 70px);*/ overflow-x: auto;}
.boxBg h2 {font-weight: 700; font-size: 32px; margin: 0px 0px 30px 0px;}
.form .form-group {margin-bottom: 20px;}
.form .form-control {background: #333333; border:none; color: #fff; height: auto; padding:10px 16px; font-size: 16px; border-radius: 0px !important;}
.form .form-control:focus {box-shadow: none;}
.form select.form-control{background: #333 url(../images/drop-down-arrow.png) no-repeat top 15px right 12px; padding-right:20px; -webkit-appearance: none; -moz-appearance: none;}
.form .btnRow {padding: 10px 0px 30px 0px;}
.form .btnRow .orangeBtn {width: 100%;}
.forGot {padding: 7px 0px;}
.forGot a {color:#ccc;}

.bottomText {color:#ccc; font-size: 13px;line-height: 1.4;}
.bottomText a {color:var(--orange);}
.bottomText p:last-child {margin-bottom: 0px;}

.topText {color:#ccc; font-size: 13px;line-height: 1.4;margin: 0px 0px 30px 0px;}
.topText strong {color: #fff;}
.autheBox h2 { margin: 0px 0px 15px 0px;}
.reme {padding:15px 0px 5px 0px;color:#ccc;}
.checkbox {position: relative; padding-left:22px;}
.checkbox input {position: absolute; left: 1px; top: 0px;}
.checkbox label {margin: 0px;display: block;font-weight: 400; cursor: pointer;line-height: 1; text-align: left;}
.checkbox label a {color: var(--orange);}

.oneTimePass {display: flex; flex-wrap: wrap; justify-content: space-between; }
.oneTimePass .form-control {flex:0 0 15.6%;padding: 12px 12px; text-align: center;}

.signUp2 h2 { margin: 0px 0px 15px 0px;}



.canvasSec {position: relative; margin:-275px 0px -170px -40px;}
.canvasSec .draw {height: 600px; padding:10px 0px;}

.login-logo img {margin-bottom: 50px;}



.visM {display: none;}
@media (max-width: 767px) {
    .visM {display: block;}
    .visD {display: none;}

    .mainBg{ padding:10px 0px 15px 0px;}
    .logo {margin: 0px 0px 20px 0px;}
    .logo img {max-width: 180px;}

    .leftText { margin: 0px 0px 25px 0px; display: none;}
    /*.leftText .desc {display: none;}*/

    .boxBg {padding:30px 15px; max-height: inherit; }
    .boxBg h2 {font-size: 22px; margin: 0px 0px 20px 0px;}
    .form .form-group {margin-bottom: 15px;}
    .form .btnRow {padding: 5px 0px 20px 0px;}

    .checkbox {padding-left: 25px;}
    .checkbox input {top: -1px;}

    .canvasSec {position: relative; margin: -20px auto;max-width: 400px; left:-8px; bottom: -10px;}
    .canvasSec .draw {height: 100px; width: 224px; padding:20px 0px;}
}
@media (max-width: 400px) {
    .canvasSec {left: -3px;}
}
@media (max-width: 360px) {
    .canvasSec {left: 8px;}
}
















 
.boxBg::-webkit-scrollbar {width: 8px;}
.boxBg::-webkit-scrollbar-track {background: #f1f1f1; }
.boxBg::-webkit-scrollbar-thumb {background: #888; }

.modal-dialog {min-height: calc(100vh - 60px); display: flex; flex-direction: column; justify-content: center; overflow: auto; }
@media(max-width: 768px) {
  .modal-dialog {min-height: calc(100vh - 20px); }
}