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


:root {
  --orange: #e4a967;
  --darkOrange: #cd8b42;
}

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/login/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; text-align: center;}
.leftText { margin: 0px 0px 30px 0px;}
.leftText h1 {font-size: 32px; margin: 0px 0px 20px 0px; font-weight: 700;}
.leftText .desc {margin: 0px 0px 10px 0px; font-weight: 300;}

.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;}
.form .form-control:focus {box-shadow: none;}
.form select.form-control{background: #333 url(../../../../images/login/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;}
.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:-200px 0px -210px 0px;text-align: center;}
.canvasSec .draw {height: 600px; padding:150px 0px;}





.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; text-align: center;}
	.leftText h1 {font-size:22px; margin: 0px 0px 10px 0px; }
	.leftText .desc {display: none;}

	.boxBg {padding:30px 15px;}
	.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: -90px 0px -120px 0px}
	.canvasSec .draw {height: 400px; padding: 100px 0px;}
}


















 
.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); }
}