/* 
    Created on : 14 Jun 2025, 4:07:11 pm
    Author     : unitrai
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
	--color-black: #000000;
	--color-white: #ffffff;
	--color-light-dark: #9ca0b4;
	--color-primary: #040f46;
	--color-primary-light: #28325c;
	--color-primary-extra-light: #384168;
	--color-secondary: #00abff;
	--color-gray: #cacfd6;
	--color-silver: #f6f8fa;
	--color-border: #f5f5f5;
	--font-awesome: "Font Awesome 5 Free";
	--font-Inter: "Inter", sans-serif;
}

body{
    background: #030F44;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    /* or 22px */
    color: #FFFFFF;
}
.wrapper {
    max-width: 1440px;
    margin:0px auto;
    background: #030F44;
}
.logo{
    max-width:309px;
    margin:80px auto;
}
.logo img{
  max-width:309px!important;
}

.form-box{
    background: #0A1544;
    border: 1px solid #0A1544;
    box-shadow: 0px 6px 40px rgba(3, 7, 24, 0.12);
    border-radius: 24px;
    width: 550px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 60px 60px 80px;
    margin:0px auto 80px;
    
}

.form-box .form-head{
    margin-bottom:40px;
    text-align: center;
}

.form-box em{
    font-size: 16px;
    color:#4CA8F8;
}


.code-form-box{
    width: 1080px;
}
.code-form-box .code-form-head {
    max-width: 458px;
    margin:0px auto;
    margin-bottom:40px;
}

.code-form-box .code-form-head .heading{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 140%;
    /* identical to box height, or 45px */
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.1px;

    color: #FFFFFF;
}

.code-form-box .code-form-head .sub-heading{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    /* or 22px */
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.1px;

    color: #FFFFFF;
}

.code-form-box .code-input-box{
    font-family: 'Inter';
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
    margin:0px auto;
    max-width:360px;
    margin-bottom:60px;
}

    /* Select app */
.code-form-box .select-app-box{
    max-width: 960px;
    /* identical to box height, or 34px */
    letter-spacing: 0.1px;
    color: #FFFFFF;
    margin-bottom:60px;
    margin-left:auto;
    margin-right:auto;
}

.code-btn-box {
    max-width:640px;
    margin:0px auto 60px;
}

.code-form-box .btn1 {
    max-width:100%!important;
}

.code-form-box .active-code-box {
   width: 768px; 
}

.code-form-box .active-code-box .code-table .row{
    align-self: stretch;
    flex-grow: 1;
}

.code-form-box .active-code-box .code-table .row.col-head .col{
    padding:24px;
    padding-top:7px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    /* identical to box height, or 112% */
    display: flex;
    align-items: center;

    color: #DBDBDB;
}

.code-form-box .active-code-box .code-table .row .col{
    color: #FFFFFF;
    padding:27.5px 24px;
    display: flex;
    align-items: center;
}

.code-form-box .active-code-box .heading{
    /* Your Active 48-Hour Passes */
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 140%;
/* identical to box height, or 34px */
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.1px;

color: #FFFFFF;


/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
margin-bottom:24px;
}

.active-code-box .code-table{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    /* identical to box height, or 112% */
    display: flex;
    align-items: center;
    color: #DBDBDB;
    flex-direction: column;
    align-self: stretch;

}

/* Primary button */

.btn-resume{

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px 24px;
gap: 8px;


border: 1px solid #4CA8F8;
border-radius: 4px;


font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 140%;
/* identical to box height, or 22px */
display: flex;
align-items: center;
text-align: center;
text-transform: capitalize;

color: #4CA8F8;

text-decoration: none;
}



.active-code-box .code-table .col-head{
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
}

.code-form-box .select-app-box .heading{
    
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 140%;
    display: flex;
    align-items: center;
    text-align: center;
    margin-bottom:40px;

}

.code-form-box .app-box-row{
      /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0px;
    gap: 80px;

}

.code-form-box .app-box-row .ex-badge{
    
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 8px;
    gap: 10px;


    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;


    /* 75 exports */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 120%;
    /* or 14px */

    color: #FFFFFF;


}

.code-form-box .app-box-row .app-box-col{
    width:390px;
}

.code-form-box .app-box-row .app-box-col .price{
    /* Frame 1321315833 */

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
padding: 0px 0px 0px 28px;
gap: 10px;

width: 390px;
height: 19px;
margin-top:8px;

/* $495 – 48-hour access */

width: 362px;
height: 19px;

font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 120%;
/* or 19px */

color: #FFFFFF;


}

.code-form-box .app-box-row div.head-row{
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
padding: 0px;
gap: 4px;
width:390px;
}

.code-form-box .app-box-content{
    margin-top:20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;
}
.code-form-box .app-box-content .text{
    display: flex;
    flex-direction: row;
    width: 362px;
    height: 17px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    /* identical to box height, or 17px */
    color: #DBDBDB;
    margin-bottom:12px;
}

.code-form-box .app-box-content .text .icon{
    width:16px;
    height:16px;
    margin-right:12px;
}

.code-form-box .app-box-row div.head-row label{
    font-family: 'Inter';
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-direction: row;
}

.code-form-box .app-box-btn-wrap{
    
    /* Auto layout */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 12px;
    margin-top:20px;
}

.code-form-box .app-box-btn-wrap .btn-blue-outline{

    width: 362px;
    height: 41px;

    border: 1px solid #4CA8F8;
    border-radius: 4px;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    /* identical to box height */
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: #4CA8F8;
    text-decoration: none;
}

.code-form-box .app-box-row div input{
    box-sizing: border-box;

    width: 16px;
    height: 16px;

    border: 1px solid #4CA8F8;
    border-radius: 9999px;
}

.code-form-box .app-box-row div input:checked{
    background: #4CA8F8;
}

.code-form-box .app-box-row div.text{
    font-family: 'Inter';
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 0%;
    color: #DBDBDB;
    margin-left:28px;
}

.text-placeholder{
    font-family: 'Inter';
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0%;
    color: #DBDBDB;
}

.code-form-box .form-control{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    /* or 22px */

    color: #262626;
}

.info-icon{
    font-size:14px;
    color:#FFFFFF;
    font-style: normal;
    font-weight: 300;
    color: #DBDBDB;
}

.form-box .heading{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 140%;
    /* or 67px */
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.1px;

    color: #FFFFFF;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    justify-content: center;
    margin-bottom:8px;
    padding-bottom:0px;
}

.form-box .form-control{
    color: #4D4D4D;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    min-width: 240px;
    height: 46px;

    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    padding: 12px 16px;
}

.form-box2 .form-control {
    color: #4D4D4D;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    min-width: auto;
    height: 46px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    padding: 12px 16px;
}


.form-box label{
    margin-bottom:8px;
}

.form-box .btn1{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 40px;
    gap: 10px;

    max-width: 430px;
    height: 43px;

    background: #4CA8F8;
    border: 1px solid #4CA8F8;
    border-radius: 4px;
    color:#FFFFFF;
    align-self:stretch;
    width:100%;
}

.password-box {
  position: relative;
  display: block;
}

.toggle-password {
  position: absolute;
  top: 53px;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  color:#4D4D4D;
}

.msg-box{
    background:var(--color-primary-light);
    border-radius: 6px;
    padding: 16px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #FFFFFF;
    display:none;
}

.success{
    /*background: #25D465;*/
    color: #FFFFFF;
}

.login-box-terms{
    max-width:430px;
    margin:0px auto;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 150%;
    /* or 16px */
    color: #DBDBDB;
}


.login-box-terms .term-input input{

    width: 16px;
    height: 16px;

    background: #4CA8F8;
    border-radius: 4px;
    margin-right:12px;
}

.login-box-terms .term-input input:checked{
    background: #4CA8F8;
}

.login-box-terms .term-input{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    /* identical to box height, or 20px */
    color: #FFFFFF;
    margin-bottom:8px;
}




.login-box-terms .term-input label{
    width:100%;
}

.login-box-terms ul.term-list{
    margin:0px;
    padding:0px 0px 0px 18px;
}


.ctrl-page a{
   color:#FFFFFF;
   text-decoration: none; 
}

.ctrl-logo{
    margin:30px 0px;
}
.ctrl-logo img{
    display: flex;
}

.ctrl-welcome-text{
   margin:30px 0px;
   text-align: right;
   color:#FFFFFF;
}

.ctrl-welcome-text a{
    color:#FFFFFF;
    margin-left:10px;
    text-decoration: none;
    font-size:18px;
}
.ctrl-welcome-text a i{
    margin-left:3px; 
}

.ctrl-page .contents-area{
    margin-top:75px;
}

.contents-area .table-area {
	background: #fcfcfd;
	box-shadow: 0 1px 4px 0 rgba(30, 40, 60, 0.06);
	border-radius: 7px;
	font-size: 12px;
        margin-top:10px;
}

.contents-area .table-area table {
	margin-bottom: 0;
}


.contents-area .table-area tr td > img {
	max-width: 22px;
}

.contents-area .table-area th {
	padding: 0.8rem 0.5rem;
	color: #3a4255;
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.1px;
	position: relative;
	cursor: pointer;
        vertical-align:middle;
        text-align:left;
	/*padding-right: 30px;*/
}

.contents-area .table-area th  a{
    color: #3a4255;
}
.contents-area .table-area th  a:hover{
    color: var(--color-primary);
}


.contents-area .table-area tr td {
	color: #2a3040;
	border-bottom-color: #eef0f4;
}

/*.contents-area .table-area tr td:last-child {
	color: var(--color-secondary);
	font-weight: 700;
}*/

.contents-area .table-area tr td:first-child {
	/*
        padding: 0.8rem 0.5rem;
	text-align: center;
        */
}

/* .contents-area .table-area tr td:last-child {
	font-weight: 600;
	font-size: 17px;
	color: var(--color-secondary);
} */


.contents-area .table-area thead th {
	border-bottom: 1.5px solid #dce0e8;
}
.contents-area .table-area tr:last-child td {
	border-bottom-width: 0;
}



.contents-area .table-area th:nth-child(1) {
	/*padding-right: 0.5rem;
	text-align: center;*/
}

.contents-area .table-area th:nth-child(2) {
	/*padding-right: 0.5rem;*/
}

.contents-area .table-area th:nth-child(1):after,
.contents-area .table-area th:nth-child(2):after {
	/*display: none;*/
}

.contents-area .table-area th.sort-asc:after {
	/*content: url(../img/icons/table-up.png);*/
}

.contents-area .table-area th.sort-desc:after {
	/*content: url(../img/icons/table-down.png);*/
}


.modal-header {
    background-color: #040F46;
    justify-content: space-between;
    background: #040F46;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px 40px;
    gap: 20px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #FFFFFF;
    border: 0px;
    border-radius: 0px !important; 
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}


.modal-body {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 140%;
    color: #272727;
}


modal-header .close, .modal-header .btn-close { 
    color: #FFFFFF;
    cursor: pointer;
}