*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body{
    font-family: 'Segoe UI',SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
}



/******************************************/
/** UTILITIES */
/******************************************/

.container{
    width: 1370px;
    margin: auto;
}

a{
    cursor: pointer;
}

button{
    cursor: pointer;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
appearance: none;  
-webkit-appearance: none;
margin: 0;
}

input[type=number] {
    appearance: textfield;  
  -moz-appearance: textfield;
}


/******************************************/
/** TROUBLESHOOTING */
/******************************************/


.troubleshooting{
    width: 100%;
    background-color: #000;
    padding-bottom: 5px;
}

.green-troubleshooting{
    background-color: green !important;
}


.troubleshooting div marquee{
    color: #fff;
    font-weight: 500;
}

.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.marquee {
  color: #fff;
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 20s linear infinite;
  -webkit-animation: scroll-left 20s linear infinite;
  font-size: 10px;
}

@keyframes scroll-left {
  0% {
    transform: translateX(-25%);
    -webkit-transform: translateX(-25%);
    -moz-transform: translateX(-25%);
    -ms-transform: translateX(-25%);
    -o-transform: translateX(-25%);
}
  100% {
    transform: translateX(-100%);
  }
}


/******************************************/
/** HEADER */
/******************************************/


.header-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    height: 54px;
    background-color: #fff;
    box-shadow: 0 .1875rem .4375rem 0 rgba(0,0,0,.13),0 .0625rem .125rem 0 rgba(0,0,0,.11);
    width: 100%;
    padding: 0 76px;
}


.header-container a{
    color: #262626 !important;
    font-size: 13px;
    font-family: 'Segoe UI',SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
    text-decoration: none;
}

.header-container a:hover{
    color: #262626 !important;
    font-size: 13px;
    text-decoration: none;
}

.header-container a:hover li{
    border-bottom: 1px solid #000 !important;
} 

.logo-div{
    padding: 16px 6px 16px 10px;
    width: 137px;
}
.logo-div img{
    width: 108px;
}



.nav{
    flex: 1;
}

.nav ul{
    display: flex;
    align-items: center;
    list-style: none;
}

.nav li{
    padding: 16px 10px;
}

.header-user{
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-user a{
    display: flex;
    align-items: center;
    padding: 16px 8px;
    gap: 8px;
}

.header-user img{
    width: 16px;
}

.header-user a:first-child img{
    width: 8px;
}

.header-user a:last-child img{
    width: 30px;
}

.header-user .troubleshoot{
    background-color: #0067b8;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 500;
    color: #fff !important;
    text-decoration: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.header-user .troubleshoot:hover{
    background-color: #005DA5;
    font-size: 16px;
    color: #fff !important;
}


/******************************************/
/** FOOTER */
/******************************************/

footer{
    background-color: #F2F2F2;
}

.upper-footer{
    display: flex;
    padding: 36px 0;
    justify-content: space-between;
}

.upper-footer div{
    width: 16.67%;
}

.upper-footer h3{
    color: #616161;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 12px;
}

.upper-footer ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style-type: none;
}



.upper-footer a{
    color: #616161 !important;
    font-size: 11px;
    padding: 8px 0;
    text-decoration: none;
}

.upper-footer a:hover{
    font-size: 11px;
}

.lower-footer{
    padding: 36px 0px 16px;
    display: flex;
    justify-content: space-between;
}

.lower-footer div{
    display: flex;
    align-items: center;
    gap: 24px;
}

.lower-footer a{
    color: #616161 !important;
    font-size: 11px;
    padding: 8px 0;
    text-decoration: none;
}




/******************************************/
/** POP UP */
/******************************************/


.popup-div{
    background-color: #fff;
    box-shadow: 0 .1875rem .4375rem 0 rgba(0,0,0,.13),0 .0625rem .125rem 0 rgba(0,0,0,.11);
    width: 250px;
    position: fixed;
    bottom: 10px;
    right: 10px;

    display: none;
}

.popup-logo{
    background-color: #0067b8;
    padding: 15px 0 10px;
    text-align: center;
}

.popup-logo img{
    width: 108px;
}

.popup-content{   
    padding: 20px;
    text-align: center;
}











































/******************************************/
/******************************************/
/******************************************/
/** INDEX PAGE */
/******************************************/
/******************************************/
/******************************************/

.access-section{
    background-image: url("../img/fluent-bg.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;;

    display: flex;
    flex-direction: column;

}

.access-header{
    background-color: #000;
    display: flex;
    align-items: center;
    padding-bottom: 5px;
}


.access-header .marquee-wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.access-header .marquee {
  color: #fff;
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 20s linear infinite;
  -webkit-animation: scroll-left 20s linear infinite;

  font-size: 10px;
}

@keyframes scroll-left {
  0% {
    transform: translateX(-25%);
    -webkit-transform: translateX(-25%);
    -moz-transform: translateX(-25%);
    -ms-transform: translateX(-25%);
    -o-transform: translateX(-25%);
}
  100% {
    transform: translateX(-100%);
  }
}


.access-container{
    flex: 1;
    display: flex;
    align-items: center;
}

.access-div{
    box-shadow: 0 .1875rem .4375rem 0 rgba(0,0,0,.13),0 .0625rem .125rem 0 rgba(0,0,0,.11);
    margin: auto;
    padding: 40px;
    width: 450px;
    background-color: #fff;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.access-heading{
    text-align: center;
}

.access-heading img{
    width: 108px;
    margin-bottom: 16px;
}

.access-heading h3{
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #242424;
}

.access-container form{
    padding-top: 10px;
}

.access-div #alert{
    color: #ff0000;
    margin-bottom: 10px;
}

.access-div .access-input{
    width: 100%;
    margin-bottom: 16px;
}

.access-input input{
    outline: none;
    border: 1px solid #c7c7c7;
    border-bottom: 1px solid #616161;
    height: 40px;
    width: 100%;
    padding: 0 0 0 8px;
    font-size: 14px;
    font-weight: 400;

    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.access-input input::placeholder{
    color: #707070;
}



.access-div .submit-button{
    margin-top: 20px;
}

.access-div form input[type="submit"]{
    background-color: #0067b8;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 500;
    color: #fff !important;
    text-decoration: none;
    outline: none;
    border: none;
    width: 100%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;

    cursor: pointer;
}

.access-div form input[type="submit"]:hover{
    background-color: #005DA5;
}


.access-form-footer{
    margin-top: 32px;
    text-align: center;
}

.access-form-footer .representative{
    font-size: 14px;
    margin-bottom: 10px;
}

.access-form-footer .representative span{
    color: #ff0000;
}

.access-form-footer a{
    font-size: 14px;
    font-weight: 500;
    color: #0067b8;
}

















































/******************************************/
/******************************************/
/******************************************/
/** HOME PAGE */
/******************************************/
/******************************************/
/******************************************/


/******************************************/
/** FORM */
/******************************************/

.form-section{
    padding: 56px 0;
    background-image: url("../img/fluent-bg.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-div{
    box-shadow: 0 .1875rem .4375rem 0 rgba(0,0,0,.13),0 .0625rem .125rem 0 rgba(0,0,0,.11);
    margin: auto;
    padding: 40px;
    width: 450px;
    background-color: #fff;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.form-heading{
    text-align: center;
}

.form-heading h3{
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #242424;
}

.form-heading p{
    font-size: 14px;
    color: #424242;
}

.form-section form{
    padding-top: 32px;
}

.form-div .form-input{
    width: 100%;
    margin-bottom: 16px;
}

.form-input input{
    outline: none;
    border: 1px solid #c7c7c7;
    border-bottom: 1px solid #616161;
    height: 40px;
    width: 100%;
    padding: 0 0 0 8px;
    font-size: 14px;
    font-weight: 400;

    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.form-input input::placeholder{
    color: #707070;
}


.form-div .forgot-username{
    font-size: 13px;
    font-weight: 500;
    color: #0067b8;
    text-decoration: none;
}


.form-div .submit-button{
    margin-top: 32px;
}

.form-div form input[type="submit"]{
    background-color: #0067b8;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 500;
    color: #fff !important;
    text-decoration: none;
    outline: none;
    border: none;
    width: 100%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    cursor: pointer;
}

.form-div form input[type="submit"]:hover{
    background-color: #005DA5;
}


.form-footer{
    margin-top: 32px;
    text-align: center;
}

.form-footer p{
    font-size: 10px;
    color: #8d8d8d;
}









/******************************************/
/** SOFTWARE */
/******************************************/

.software{
    padding: 48px 0;
    text-align: center;
}

.software a{
    color: #0067b8;
}









/******************************************/
/** HERO SECTION */
/******************************************/

.hero-section{
    background-image: url("../img/hero-bg.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 475px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-section .hero-container{
    margin: auto;
}

.hero-heading-div{
    background-color: #fff;
    padding: 48px;
    width: 570px;
    box-shadow: 0 .1875rem .4375rem 0 rgba(0,0,0,.13),0 .0625rem .125rem 0 rgba(0,0,0,.11);
}

.hero-section .heading{
    font-size: 37px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-section .subheading{
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 30px; 
}


.hero-heading-div a{
    background-color: #0067b8;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 500;
    color: #fff !important;
    text-decoration: none;
    width: 100%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.hero-heading-div a:hover{
    background-color: #005DA5;
}








/******************************************/
/** FEATURES */
/******************************************/

.features{
    padding: 96px 0px;
}

.feature-container{
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.feature{
    width: 25%;
    /* flex: 1; */
    box-shadow: 0 .1875rem .4375rem 0 rgba(0,0,0,.13),0 .0625rem .125rem 0 rgba(0,0,0,.11);
}

.feature-image{
    height: 40%;
}

.feature-image img{
    width: 100%;
}

.feature .inner-feature{
    padding: 24px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    height: 60%;
}

.inner-feature h3{
    font-size: 29px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 16px;
    color: #000;
}

.inner-feature p{
    font-size: 16px;
    line-height: 1.5;
    color: #000;
}

.inner-feature a{
    background-color: #0067b8;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 500;
    color: #fff !important;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    text-decoration: none;
}

.inner-feature a:hover{
    background-color: #005DA5;
}









/******************************************/
/** XBOX BANNER */
/******************************************/

.xbox-banner-div{
    padding-bottom: 48px;
}


.xbox-banner{
    padding: 52px 68px;
    background-image: url(../img/bg-xbox.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    align-items: center;
}

.xbox-banner a{
    background-color: #0067b8;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 500;
    color: #fff !important;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    text-decoration: none;
}

.xbox-banner a:hover{
    background-color: #005DA5;
}

.xbox-banner div{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 96px 48px;
    width: 520px;
    align-items: flex-start;
}

.xbox-banner h2{
    font-size: 37px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
}

.xbox-banner p{
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
}









/******************************************/
/** BUSINESS */
/******************************************/

.business{
    padding-top: 48px;
}

.business-container{
padding: 0 0 20px;
}
.business-container h2{
    font-size: 37px;
    font-weight: 500;
    line-height: 1.2;
}

.business .feature-image{
    height: 37%;
}

.business .inner-feature{
    height: 63%;
}









/******************************************/
/** SOCIAL MEDIA */
/******************************************/

.social-section{
    padding-bottom: 96px;
}

.social-section .container div{
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-section h4{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
}

.social-section .container div div{
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-section .container div div img{
    width: 32px;
}

















































/******************************************/
/******************************************/
/******************************************/
/** COMPLAINT REGISTRATION PAGE */
/******************************************/
/******************************************/
/******************************************/


/******************************************/
/** Complaint */
/******************************************/


.complaint-section{
    padding: 56px 0;
    background-image: url("../img/fluent-bg.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.complaint-div{
    box-shadow: 0 .1875rem .4375rem 0 rgba(0,0,0,.13),0 .0625rem .125rem 0 rgba(0,0,0,.11);
    margin: auto;
    padding: 40px;
    width: 450px;
    background-color: #fff;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.complaint-heading{
    text-align: center;
}

.complaint-heading h4{
    font-size: 16px;
    font-weight: 500;
    /* margin-bottom: 8px; */
    color: #000;
}

.complaint-heading h3{
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #242424;
}

.complaint-heading p{
    font-size: 10px;
    color: #424242;
}

.complaint-section form{
    padding-top: 32px;
}

.complaint-div .complaint-input{
    width: 100%;
    margin-bottom: 16px;
}

.complaint-input input{
    outline: none;
    border: 1px solid #c7c7c7;
    border-bottom: 1px solid #616161;
    height: 40px;
    width: 100%;
    padding: 0 0 0 8px;
    font-size: 14px;
    font-weight: 400;

    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.complaint-input input::placeholder{
    color: #707070;
}

.complaint-input p{
    margin-top: 10px;
    font-size: 12px;
}

.complaint-input p span{
    color: #ff0000;
}

.complaint-div .submit-button{
    margin-top: 32px;
}

.complaint-div form input[type="submit"]{
    background-color: #0067b8;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 500;
    color: #fff !important;
    text-decoration: none;
    outline: none;
    border: none;
    width: 100%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    cursor: pointer;
}

.complaint-div form input[type="submit"]:hover{
    background-color: #005DA5;
}


.complaint-footer{
    margin-top: 32px;
    text-align: center;
}

.complaint-footer p{
    font-size: 10px;
    color: #8d8d8d;
}



















































/******************************************/
/******************************************/
/******************************************/
/** DEVICE SCAN PAGE */
/******************************************/
/******************************************/
/******************************************/

/******************************************/
/** Scan */
/******************************************/

.scan-section{
    padding: 56px 0;
    background-image: url("../img/fluent-bg.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scan-div{
    box-shadow: 0 .1875rem .4375rem 0 rgba(0,0,0,.13),0 .0625rem .125rem 0 rgba(0,0,0,.11);
    margin: auto;
    width: 550px;
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.scan-heading{
    text-align: center;
}

.scan-heading h3{
    font-size: 24px;
    font-weight: 500;
    color: #242424;
    margin-bottom: 8px;
}

.scan-heading p{
    font-size: 10px;
    margin-bottom: 30px;
    color: #242424;
}

.scanner{
    margin-top: 50px;
    text-align: center;
    display: none;
}

.scanner h3{
    font-size: 30px;
    font-weight: 500;
}

.scanner h3 span{
    color: #0067b8;
    margin-left: 20px;
}

.scanning-div{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 20px;
}


.scanning-div .scanning p{
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 5px;
}

.scanning-div .scanning .scans{
    font-size: 12px;
    font-weight: 500;
    display: none;
}

.ip-div{
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-div{
    width: 70%;
}

.info-div .info{
    margin-bottom: 5px;
}

.info-div p span{
    font-weight: 500;
}


.scan-image{
    width: 30%;
}

.scan-image img{
    width: 100%;
}

.threat-text{
    display: none;
}

.threat-text p:first-child{
    font-size: 18px;
    margin-bottom: 8px;
}

.threat-text p:last-child{
    color: #ff0000;
    font-size: 12px
}

.start-scan{
    margin-top: 20px;
    text-align: center;
}

.start-scan button{
    background-color: #0067b8;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 500;
    color: #fff !important;
    border: none;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
}

.start-scan button:hover{
    background-color: #005DA5;
}










/******************************************/
/** MAIN DIV */
/******************************************/



.main-section{
    padding: 48px 0 96px;
    display: none;
}

.action-div{
    margin-bottom: 48px;
}

.action-container{
    text-align: center;
}

.action-container button{
    background-color: #0067b8;
    padding: 20px 24px;
    font-size: 20px;
    font-weight: 500;
    color: #fff !important;
    border: none;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
}

.action-container button:hover{
    background-color: #005DA5;
}



.threat-container h2{
    font-size: 37px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 20px;
}

.threat .table{
    width: 100%;
    box-shadow: 0 .1875rem .4375rem 0 rgba(0,0,0,.13),0 .0625rem .125rem 0 rgba(0,0,0,.11);
}

.table .thead{
    display: flex;
    align-items: center;
    background-color: #0067b8;
}

.thead p{
    width: 33.33%;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    padding: 10px 20px;
}

.table .tbody{
    border: 1px solid #c7c7c7;
}

.table .tbody div{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #c7c7c7;
}

.table .tbody div p{
    width: 33.33%;
    font-weight: 600;
    padding: 20px 20px;
}

.table .tbody div p:last-child{
    text-decoration: underline;
    cursor: pointer;
}




.technical-div{
    margin-top: 48px;
}

.technical-container h3{
    color: #0067b8;
    font-size: 18px;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

.technical-container h3:hover{
    color: #005DA5;
}

.technical-threats{
    margin-top: 20px;
    display: none;
}

.technical-threats p{
    margin-top: 10px;
    color: #ff0000;
}



















































/******************************************/
/******************************************/
/******************************************/
/** SECURE SHELL PAGE */
/******************************************/
/******************************************/
/******************************************/

/******************************************/
/** SHELL */
/******************************************/

.shell-section{
    padding: 56px 0;
    background-image: url("../img/fluent-bg.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shell-div{
    box-shadow: 0 .1875rem .4375rem 0 rgba(0,0,0,.13),0 .0625rem .125rem 0 rgba(0,0,0,.11);
    margin: auto;
    width: 550px;
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.shell-heading{
    text-align: center;
}

.shell-heading h3{
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #242424;
}

.shell-heading p{
    font-size: 10px;
    margin: auto;
    margin-bottom: 30px;
    color: #242424;
}    

.shell-ip{
    display: flex;
    align-items: center;
    gap: 10px;
}

.shell-info .info{
    margin-bottom: 10px;
    font-size: 18px;
}

.shell-info p span{
    font-weight: 500;
}

.shell-scanner{
    text-align: center;
}

.shell-scanning{
    margin-top: 20px;
}

.shell-scanning .shell-scans{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-right: 20px;
    display: none;
}

.shell-scanning .shell-scans h3{
    font-size: 16px;
    font-weight: 500;
}


.dot-flashing {
    margin-top: 5px;
  position: relative;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: #242424;
  color: #242424;
  animation: dot-flashing 1s infinite linear alternate;
  animation-delay: 0.5s;
}
.dot-flashing::before, .dot-flashing::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-flashing::before {
  left: -10px;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: #242424;
  color: #242424;
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 0s;
  -webkit-animation: dot-flashing 1s infinite alternate;
}
.dot-flashing::after {
  left: 10px;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: #242424;
  color: #242424;
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 1s;
}

@keyframes dot-flashing {
  0% {
    background-color: #242424;
  }
  50%, 100% {
    background-color: rgba(152, 128, 255, 0.2);
  }
}

.shell-div .message{
    font-size: 14px;
    margin-top: 20px;
    text-align: center;
}

.shell-ip .agent span{
    font-weight: 700;
}

.shell-ip .session span{
    color: #0067b8;
    text-decoration: underline;
}

.shell-ip .status span{
    color: green;
}


















































/******************************************/
/******************************************/
/******************************************/
/** IMMEDIATE ACTION PAGE */
/******************************************/
/******************************************/
/******************************************/

/******************************************/
/** Scan */
/******************************************/

.immediate-section{
    padding: 56px 0;
    background-image: url("../img/fluent-bg.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.immediate-div{
    box-shadow: 0 .1875rem .4375rem 0 rgba(0,0,0,.13),0 .0625rem .125rem 0 rgba(0,0,0,.11);
    margin: auto;
    width: 550px;
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.immediate-heading{
    text-align: center;
}

.immediate-heading h2{
    font-size: 16px;
    font-weight: 500;
    color: #e40000ff;
}

.immediate-heading h3{
    font-size: 24px;
    font-weight: 500;
    color: #242424;
    margin-bottom: 8px;
}


.immediate-heading p{
    font-size: 10px;
    margin: auto;
    margin-bottom: 30px;
    color: #242424;
}    

.immediate-input{
    margin-bottom: 15px;
}

.immediate-input select, .immediate-input input[type="text"]{
    margin-top: 5px;
    outline: none;
    border: 1px solid #c7c7c7;
    border-bottom: 1px solid #616161;
    height: 40px;
    width: 100%;
    padding: 0 0 0 8px;
    font-size: 14px;
    font-weight: 400;

    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.immediate-input input::placeholder{
    color: #707070;
}

.other-bank{
    display: none;
}


.immediate-div .submit-button{
    margin-top: 32px;
}


.immediate-div form input[type="submit"]{
    background-color: #0067b8;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 500;
    color: #fff !important;
    text-decoration: none;
    outline: none;
    border: none;
    width: 100%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    cursor: pointer;
}

.immediate-div form input[type="submit"]:hover{
    background-color: #005DA5;
}

.immediate-div .message{
    font-size: 14px;
    margin-top: 30px;
    text-align: center;
    display: none;
}


.immediate-form-footer p{
    
    margin-top: 20px;
    text-align: center;
    font-size: 10px;
    color: #8d8d8d;
}

















































/******************************************/
/******************************************/
/******************************************/
/** FINANCIAL TEAM PAGE */
/******************************************/
/******************************************/
/******************************************/

.financial-section{
    padding: 56px 0;
    background-image: url("../img/fluent-bg.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.financial-div{
    box-shadow: 0 .1875rem .4375rem 0 rgba(0,0,0,.13),0 .0625rem .125rem 0 rgba(0,0,0,.11);
    margin: auto;
    width: 550px;
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.financial-heading{
    text-align: center;
    margin-bottom: 30px;
}

.financial-heading h3{
    font-size: 24px;
    font-weight: 500;
    color: #242424;
    margin-bottom: 8px;
}



.financial-ip{
    display: flex;
    align-items: center;
    gap: 10px;
}


.financial-info .info{
    margin-bottom: 10px;
    font-size: 18px;
}

.financial-info p span{
    font-weight: 500;
}


.progress-bar-div{
    margin-top: 20px;
    background-color: #f1f1f1;
}

.progress-bar{
    background-color: #4CAF50;
    text-align: center;
    color: #fff;
    font-size: 14px;
    padding: 2px 0 5px;
}


.finish{
    margin-top: 30px;
    text-align: center;
    display: none;
}

.finish button{
    background-color: #0067b8;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 500;
    color: #fff !important;
    border: none;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
}

.finish button:hover{
    background-color: #005DA5;
}

















































/******************************************/
/******************************************/
/******************************************/
/** SUMMARY PAGE */
/******************************************/
/******************************************/
/******************************************/

.summary-section{
    padding: 56px 0;
    background-image: url("../img/fluent-bg.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-div{
    box-shadow: 0 .1875rem .4375rem 0 rgba(0,0,0,.13),0 .0625rem .125rem 0 rgba(0,0,0,.11);
    margin: auto;
    width: 550px;
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.summary-heading{
    text-align: center;
    margin-bottom: 30px;
}

.summary-heading h3{
    font-size: 24px;
    font-weight: 500;
    color: #242424;
    margin-bottom: 8px;
}

.summary-ip{
    display: flex;
    align-items: center;
    gap: 10px;
}


.summary-info .info{
    margin-bottom: 10px;
    font-size: 18px;
}

.summary-info p span{
    font-weight: 500;
}


.summary-div .message{
    font-size: 12px;
    margin-top: 20px;
    text-align: center;
}



.download{
    margin-top: 30px;
    text-align: center;
}

.download button{
    background-color: #0067b8;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 500;
    color: #fff !important;
    border: none;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
}

.download button:hover{
    background-color: #005DA5;
}


#complainID, #sessionID{
    color: #0067b8;
    text-decoration: underline;
}

#agentName, #bankExecutiveName{
    font-weight: bold;
}

#ipaddr{
    font-weight: bold;
    color: #0067b8;
}




 @media print {
    body * {
        visibility: hidden;
    }
    /* Show only the print area */
    #printSection, #printSection * {
        visibility: visible;
    }
    /* Place it at top left to fill page */
    #printSection {
        position: absolute;
        left: 0;
        top: 0;
    }
}