@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

html {
    height: 100%;
}

body {
    font-family: "Open Sans" !important;
    /* background-color:  #ffffff !important; */
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.height100Vh {
    height: 100vh !important;
}

.table-striped-custom > tbody > tr:nth-child(odd) > td,
.table-striped-custom > tbody > tr:nth-child(odd) > th {
    background-color: #faf8f6 !important;
}

/*---------------------------- width classes ---------------------*/

.w-10 {
    width: 10%;
}

.w-3 {
    width: 3% !important;
}

.w-5 {
    width: 5% !important;
}

.w-6 {
    width: 6% !important;
}
.w-7 {
    width: 7% !important;
}
.w-8 {
    width: 8% !important;
}

.w-15 {
    width: 13% !important;
}


.w-16 {
    width: 16% !important;
}

.w-18 {
    width: 18% !important;
}

.w-20 {
    width: 20%;
}

.w-22 {
    width: 22% !important;
}

.w-28 {
    width: 28% !important;
}

.w-30 {
    width: 30% !important;
}

.w-35 {
    width: 35% !important;
}

.w-33 {
    width: 32% !important;
}

.w-32 {
    width: 33% !important;
}

.w-40 {
    width: 40% !important;
}

.w-45 {
    width: 45% !important;
}

.w-48 {
    width: 48% !important;
}

.w-43 {
    width: 43% !important;
}

.w-52 {
    width: 52% !important;
}

.w-58 {
    width: 58% !important;
}

.w-60 {
    width: 60% !important;
}

.w-65 {
    width: 65% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80%;
}

.w-85 {
    width: 85%;
}

.w-90 {
    width: 90%;
}

.w-300 {
    width: 300px;
}

.w1500px {
    width: 1500px !important;
}

.tabHeaderWidth {
    width: 800px !important;
}

.tabBodyWidth {
    width: 820px !important;
}
/*---------------------------- height classes ---------------------*/
.h-10 {
    width: 10%;
}

.h-20 {
    width: 20%;
}

.h-30 {
    width: 30%;
}

.h-40 {
    width: 40%;
}

.h-60 {
    width: 60% !important;
}

.h-70 {
    width: 70%;
}

.h-80 {
    width: 80%;
}

.h-90 {
    width: 90%;
}

.h-100 {
    height: 100% !important;
}


/*-------------------Web login page css --------------------*/
.limiter {
    width: 100%;
}

.containerlogin {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
}

.warplogin {
    width: 100%;
    background: #fff;
    overflow: hidden;
    display: flex;
    /* flex-wrap: wrap; */
    align-items: stretch;
    flex-direction: row-reverse;
}

.loginform {
    width: 900px;
    /* min-height: 100vh; */
}

.loginimg {
    width: calc(100% - 900px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
    min-height: 100vh !important;
    background-image: url('../images/FireExtinguisher-scaled.jpeg');
}
/* .loginimgsupp{
  width: calc(100% - 900px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
  min-height: 100vh !important;
  opacity: .6;
  background-image: url('../images/FireExtinguisher-scaled.jpeg');
} */
.mt200px {
    margin-top: 190px !important;
}

.mt220px {
    margin-top: 210px !important;
}

.mt150px {
    margin-top: 150px !important;
}

.mt130px {
    margin-top: 130px !important;
}

.headerimgwidth {
    width: 15% !important;
}

.smalltext {
    font-size: 14px !important;
}

.smallertext {
    font-size: 12px !important;
}

.smallesttext {
    font-size: 10px !important;
}

.mxambilogo {
    margin-left: 350px !important;
    margin-right: 350px !important;
}

.smalltexticon {
    font-size: 12px !important;
}

.headbgcolor {
    background-color: #132144 !important;
}

.headbgheight {
    height: 63px !important;
}

.w340px {
    width: 350px !important;
}

.w290px {
    width: 290px !important;
}

.w210px {
    width: 210px !important;
}

.SBbackgrnd {
    color: #5D6D7E !important;
    border-color: rgba(255,255,255,.1) !important;
    background-color: rgba(255,255,255,.1) !important;
}

    .SBbackgrnd:focus {
        color: #1e2022 !important;
        background-color: #fff !important;
    }

.imgperson {
    height: 39px;
    width: 39px;
}


.h25px {
    height: 25px !important;
}

.navbariconsize {
    font-size: 12px !important;
}

.anchortagsize {
    font-size: 14px !important;
}

.textsizenavbar {
    font-size: 14px !important
}

.pyhead {
    padding-top: 10px !important;
    /* padding-bottom: 10px !important; */
}

.headbgbotomcolor {
    background-color: #ededed !important;
}


/*---------------------- CSS for Tabs --------------------------*/

.nav-tabs .nav-item .nav-link {
    color: gray !important;
}

    .nav-tabs .nav-item .nav-link.active {
        color: #062b8a !important;
        background-color: #f2f2f2;
    }
/*-------------- on hover opendropdown --------------*/
.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
    }

.w250px {
    width: 250px !important;
}

.pt13px {
    padding-top: 13px !important;
}
.fs12px{
    font-size: 12px !important;
}
.fs13px {
    font-size: 12px !important;
}
.divraduis {
    border-radius: 10px !important;
}

.dropdown-item:active {
    color: #5D6D7E !important;
    background-color: #e9ecef !important;
}

.bg-blue {
    background-color: #132144 !important;
}

.margintop50 {
    margin-top: 50px !important;
}

.margintop80 {
    margin-top: 50px !important;
}
.margintop100 {
    margin-top: 100px !important;
}

.margintop120 {
    margin-top: 120px !important;
}

.margintop150 {
    margin-top: 150px !important;
}

.border5 {
    border-width: 0.5px !important;
}

.bg-light1 {
    background-color: #f5f5f5 !important;
}

.bg-light3 {
    background-color: #f0f0f0 !important;
}

.bg-light2 {
    background-color: #f2f2f2 !important;
}

.bg-yellow {
    background-color: #ffb81c !important;
}

.bg-yellow1 {
    background-color: #ffc000 !important;
}

.bg-yellow2 {
    background-color: #ffefc3 !important;
}

.bg-yellow3 {
    background-color: #ffe28b !important;
}

.bg-orange {
    background-color: #e6661c !important;
}

.bg-dark3 {
    background-color: #666666 !important;
}

.bg-dark4 {
    background-color: #929292 !important;
}

.bg-bodycolor {
    background-color: #474747 !important;
}

.bg-gray3 {
    background-color: #dddddd !important;
}

.bg-gray4 {
    background-color: #cccccc !important;
}

.bg-green {
    background-color: #228c80 !important;
}

.bg-green1 {
    background-color: #4ac97d !important;
}

.bg-green2 {
    background-color: #c3f9d9 !important;
}

.bg-gray5 {
    background-color: #e8e8e8 !important;
}

.bg-gray6 {
    background-color: #f6f6f6 !important;
}

.bg-red {
    background-color: #ff8a84 !important;
}

.footertextcolor {
    color: #ffffff !important;
}

.footertextcolorlogin {
    color: #132144 !important;
}

.footertextsize {
    font-size: 10px !important;
}

::placeholder {
    color: #fff !important;
}

.borderend {
    border-right: solid 1px #ffffff !important;
}

.borderorng {
    border-right: solid 5px #e6661c !important;
}

.text-dark1 {
    color: #000000 !important;
}

.text-blue {
    color: #132144 !important;
}

.text-blue1 {
    color: #062b8a !important;
}

.text-orange {
    color: #e6661c !important;
}

.text-orange1 {
    color: #0088c5 !important;
}

.text-yelow {
        color: #ffc000 !important;
}

.text-yelow3 {
    color: #FFFF00 !important;
}

.flexgrow1 {
    flex-grow: .1 !important;
}

.text-gray {
    color: #929292 !important;
}

.text-gray6 {
    color: #dddddd !important;
}

::placeholder {
    color: #929292 !important;
}

.borderend {
    border-right: 1px solid #787878 !important;
}

.bordertoporng {
    border-top: 2px solid #e6661c !important;
}

.borderbottomorng {
    border-bottom: 5px solid #ffb81c !important;
}

.borderbottomgreen {
    border-bottom: 5px solid #228c80 !important;
}

.borderbottolight {
    border-bottom: 5px solid #eeeeee !important;
}

.bordertopgreen {
    border-top: 2px solid #9ad36a !important;
}

.bordertopred {
    border-top: 2px solid #99231d !important;
}

.bordertopblue {
    border-top: 2px solid #2da4cd !important;
}

.text-gray1 {
    color: #adadad !important;
}

.text-gray3 {
    color: #cccccc !important;
}

.text-gray4 {
    color: #787878 !important;
}

.text-gray5 {
    color: #ababab !important;
}

.text-gray7 {
    color: #A9A9A9 !important;
}

.text-green {
    color: #228c80 !important;
}

.text-green1 {
    color: #00b380 !important;
}

.text-green1 {
    color: #52d9ac !important;
}

.text-red {
    color: #99231d !important;
}

.text-red1 {
    color: #de0b00 !important;
}

.btn-blue {
    background-color: #132144 !important;
}

.btn-blue1 {
    background-color: #062b8a !important;
}

.btn-green {
    background-color: #228c80 !important;
}

.btn-green1 {
    background-color: #00b380 !important;
}

.btn-red {
    background-color: #99231d !important;
}

.btm-orange {
    background-color: #e6661c !important;
}

.btm-orange1 {
    background-color: #e97f42 !important;
}
.btn-gray {
    background-color: #cccccc !important;
}

.btn-gray1 {
    background-color: #ababab !important;
}

.btn-gray2 {
    background-color: #787878 !important;
}

.btn-gray3 {
    background-color: #9f9f9f !important;
}


.lineheight22px{
    line-height:22px !important
}

#normaltablebody td {
    font-size: 15px !important;
}

#normaltablebodylogin td {
    font-size: 12px !important;
}

#normaltableheadlogin td {
    font-size: 12px !important;
}

#normaltablehead th {
    font-size: 12px !important;
}

.px15py20 {
    padding: 15px 20px !important;
}

#normaltablebody td {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

#responsetablebody td {
    padding: 15px 20px !important;
    line-height: 25px !important;
}

#normaltablebodylogin td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

#Webnormaltablehead th {
    font-size: 14px !important;
}

#Webnormaltablebody td {
    font-size: 12px !important;
}

#Webnormaltablebodyreport td {
    font-size: 12px !important;
}

#Webnormaltablebody td {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
}

#Webnormaltablebodypaddind {
    font-size: 12px !important;
}

    #Webnormaltablebodypaddind td {
        padding: 15px 20px !important;
        line-height: 25px !important;
    }

#WebnormaltablebodypaddindSummary {
    font-size: 12px !important;
}

#WebnormaltablebodypaddindSummary td{
    padding: 9px 20px !important;
    line-height: normal !important;
}

#WebnormaltablebodypaddindResponse {
    font-size: 12px !important;
}


    #WebnormaltablebodypaddindResponse td {
        padding: 12px 14px !important;
        line-height: 22px !important;
    }

    #WebReporttablebodypaddind {
        font-size: 14px !important;
    }

#WebReporttablebodypaddind {
    padding: 15px 15px !important;
    line-height: 25px !important;
}

.w150px {
    width: 150px !important;
}

.ms65rem {
    margin-left: 11.5rem !important;
}

.w120px {
    width: 120px !important;
}

.fs-5 {
    font-size: 1.0rem !important;
}

.fs10px{
    font-size : 10px !important;
}
.h100w100px {
    width: 120px !important;
    height: 100px !important;
}

.w250h280px {
    width: 250px !important;
    height: 250px !important;
}

.h30px {
    height: 30px !important;
}

.ms180px {
    margin-left: 180px !important;
}

.widthpdf {
    height: auto;
    width: 100%;
}

@media (min-width: 576px) {
    .w20 {
        width: 20% !important;
    }

    .w58 {
        width: 58% !important;
    }

    .w78 {
        width: 78% !important;
    }

    .w30 {
        width: 30% !important;
    }

    .w35 {
        width: 35% !important;
    }

    .w18 {
        width: 18% !important;
    }

    .w22 {
        width: 22% !important;
    }

    .w48 {
        width: 48% !important;
    }
}


/* -------------------------media query for assessor login------------------  */

@media only screen and (max-width: 800px) {

    .margintop120 {
        margin-top: 100px !important;
    }
}
/* -------------------------media query for container widht------------------  */

@media only screen and (max-width: 2000px) {

    .containerwidht {
        max-width: 1450px !important;
    }

    .w350px {
        width: 350px !important;
    }

    .reportdivwidth {
        width: 50% !important;
    }

    .wgraybutton {
        width: 5% !important;
    }
    .ddwidth {
        min-width: 20% !important;
    }

    .ddwidthnoraml {
        min-width: 10% !important;
    }
}

@media only screen and (max-width: 1600px) {

    .containerwidht {
        max-width: 1200px !important;
    }

    .w350px {
        width: 250px !important;
    }
    .ddwidth {
        min-width: 180px !important;
    }

    .ddwidthnoraml {
        min-width: 100px !important;
    }
    
}

@media only screen and (max-width: 1200px) {

    .containerwidht {
        max-width: 900px !important;
    }

    .w350px {
        width: 250px !important;
    }

    .wgraybutton {
        width: 7% !important;
    }
    .ddwidth {
        min-width: 80px !important;
    }

    .ddwidthnoraml {
        min-width: 60px !important;
    }
}

@media only screen and (max-width: 992px) {

    .containerwidht {
        max-width: 700px !important;
    }

    .w350px {
        width: 250px !important;
    }

    .reportdivwidth {
        width: 60% !important;
    }

    .wgraybutton {
        width: 9% !important;
    }
}

@media only screen and (min-width: 992px) {


    .Depdropdownwith {
        width: 20% !important;
    }
}

@media only screen and (max-width: 767px) {
    .containerwidht {
        max-width: 610px !important;
    }

    .wgraybutton {
        width: 7% !important;
    }
}

@media only screen and (max-width: 650px) {
    .containerwidht {
        max-width: 480px !important;
    }

    .wgraybutton {
        width: 9% !important;
    }
}

@media only screen and (max-width: 520px) {
    .containerwidht {
        max-width: 400px !important;
    }

    .wgraybutton {
        width: 10% !important;
    }
}

@media only screen and (max-width: 440px) {
    .containerwidht {
        max-width: 350px !important;
    }
}

@media only screen and (max-width: 390px) {
    .containerwidht {
        max-width: 290px !important;
    }
}


.img-magnifier-container {
    position: relative;
}

.img-magnifier-glass {
    position: absolute;
    border: 3px solid #000;
    border-radius: 50%;
    cursor: none;
    /*Set the size of the magnifier glass:*/
    width: 250px;
    height: 250px;
}


.camImageWH {
    width: 400px;
    height: 500px;
}