:root{
    --blue-color: #444a86;
    --dark-sky-color: #349ef4;
    --orange-color: #f6783d;
    --light-sky-color: #a1d3fc;
    --green-color: #44fe21;
    --yellow-color: #ffde3c;
    --white-bg: #f7f8fa;
    --red-bg: #f53324;
}


/* ===== Dashboard page css ===== */
.logo-img1{
    width: 25%;
}

.dashboard-tbl .container{
    max-width: 1300px;
}

.dashboard-tbl{
    margin-top: 50px;
}

.dashboard-tbl1{
    background-color: #fff;
    padding: 13px;
    border-radius: 0px 15px 15px 15px;
}

.heading4{
    color: #2e416b;
    font-size: 19px;
}

.dashboard-tbl .heading4{ 
    background-color: #fff;
    width: 48%;
    border-radius: 15px 50px 0px 0px;
    padding: 10px 10px;
}

.dashboard-tbl1 thead th{
    color: var(--dark-sky-color);
    font-size: 16px;
    font-weight: 600;
    padding: 10px 4px;
    border: none;
}

.dashboard-tbl1 tbody td{
    vertical-align: middle;
    font-size: 13px;
    color: #000;
    border: none;
    line-height: 20px;
}

.dashboard-tbl1 tbody td:last-child{
    text-align: end;
}
 
.dashboard-tbl1 .table{
    border: none;
}

.dashboard-tbl .col-lg-4{
    margin-bottom: 30px;
}

.dashboard-footer{
    display: ruby !important;
    padding: 0 !important;
    margin: 0px 30px 15px;
    background-color: transparent !important;
    box-shadow: none !important;
}

.foot-logo{
    margin-right: 15px;
}

.dashboard-footer .copyright-txt p{
    margin-bottom: 7px;
    color: #000;
}

.copyright-txt {
    position: relative;
    top: 10px;
}

.dashboard-footer .copyright-txt span{
    color: #000;
    font-size: 12px;
}

.dashboard-pge .idspan{
    color: var(--Note);
    margin-top: 5px;
}

.id-class{
    width: 50px;
}

.severity-class{
    width: 70px;
}

.dashboard-tbl1 tbody tr:first-child{
    background-color: #F2F7FB;
}

.mid-dropdown{
    display: flex;
    justify-content: center;
}

.mid-dropdown .btn-secondary{
    color: #000;
    background-color: #f0f0f0;
    border-color: #f0f0f0;
    font-size: 17px;
    padding: 7px 0px;
    font-weight: 600;
    width: 60%;
}

.mid-dropdown .dropdown-item{
    font-size: 13px;
    line-height: 30px;
    text-transform: uppercase;
    font-weight: 600;
}

.mid-dropdown .fa-angle-right{
    position: absolute;
    right: 10px;
    top: 12px;
}

.mid-dropdown .dropend .show{
    color: var(--orange-color);
}

.idspan {
    color: var(--Note);
    margin-top: 5px;
}

.mid-dropdown .dropdown-menu .dropdown-toggle::before, .dropdown-menu .dropdown-toggle::after {
    position: absolute;
    top: 0.85em;
    display: none;
}

.mid-dropdown .dropdown-menu .dropdown-toggle::before {
    left: 0.255em;
}

.mid-dropdown .dropdown-menu .dropdown-toggle::after {
    right: 0.255em;
}

.mid-dropdown .dropdown-menu.show {
    width: 60%;
}
/* ===== // Dashboard page css ===== */


/* ============= Page 2 css ============== */
.page2 .box-logo img{
    width: 40%;
    height: auto;
}

.page2 .layout-wrap .section-menu-left{
    background-color: #cfd2e2;
    box-shadow: none;
}

.page2 .layout-wrap .section-menu-left > .box-logo{
    background-color: #cfd2e2;
    border-bottom: none;
}

.page2 .layout-wrap .section-content-right .main-content{
    padding-top: 0;
    background: #cfd2e2;
}

.page2 .layout-wrap .section-content-right .main-content .main-content-inner{
    padding: 20px 20px;
    background-color: #f3f4f8;
    margin: 12px 0px 12px 12px;
    border-radius: 20px 0px 0px 20px;
}

.page2 li.menu-item.active{
    background-color: #e2e4ee !important;
    border-radius: 30px !important;
}
 
.page2 .menu-item li a{
    padding: 9px 17px;
}

.page2 .layout-wrap .section-menu-left > .center .center-item{
    margin-bottom: 0;
}

.page2 .dashboard-footer{
    position: absolute;
    bottom: 0;
    margin: 0;
}

.page2 .bottom-foot-sec{
    display: flex !important;
    align-items: center;
    background-color: #fff !important;
    border-radius: 5px;
    margin: 10px 5px 15px 20px;
}

.page2 .dashboard-footer .copyright-txt p{
    text-align: right;
    font-size: 9px;
    padding: 0px 3px 0px 0px;
    margin-bottom: 0;
    line-height: 17px;
    font-weight: 600;
}

.page2 .copyright-txt{
    top: 0;
}

.page2 .layout-wrap .section-menu-left > .center{
    padding: 10px 5px 0px 20px;
}

.page2 .copyright-txt p span{
    display: block;
    font-size: 9px;
    font-weight: 400;
}

.page2 .foot-logo img{
    width: 50px;
}

.page2 .menu-item i{
    font-size: 16px;
    position: relative;
    top: 2px;
}

.page2 .iso-btn{
    background-color: var(--orange-color);
    text-align: center;
    border-radius: 30px;
    margin-bottom: 15px;
    width: 100%;
    padding: 14px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.page2 .iso-btn .text{
    color: #fff !important;
    background-color: transparent;
    font-size: 16px;
    overflow: hidden;
    font-weight: 500;
    padding: 14px 0px;
} 

.custom-dropdown{
    border: 1px solid var(--orange-color);
    width: 70%;
    border-radius: 5px;
    padding: 5px 15px 5px 0px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.custom-dropdown .active-tab{
    background-color: #f6783d21;
    border-radius: 30px;
}

.custom-dropdown li a{
    text-transform: uppercase;
    font-size: 13px;
    padding: 8px 15px !important;
    margin: 0px 8px;
}

.custom-dropdown .dropdown-item:hover{
    background-color: #f6783d21;
    border-radius: 30px;
}

.custom-dropdown .fa-play{
    font-size: 8px !important;
    top: -1px !important;
    margin-right: 5px;
    color: var(--orange-color);
}

.custom-dropdown .fa-play:before{
    color: var(--orange-color);
}

.page2 .iso-btn .text i{
    font-size: 9px !important;
    margin-left: 4px;
    position: relative;
    top: -2px;
}

.dropend .dropdown-toggle::after {
    vertical-align: 1px;
    font-size: 18px;
}

.page2 .foot-bottom-links {
    margin: 0px 0px 0px 15px;
    background-color: #001035;
    border-radius: 10px;
    display: flex;
    width: 90%;
    padding: 12px;
}

.page2 .foot-bottom-links ul li{
    font-size: 13px;
    line-height: 34px;
}

.page2 .foot-bottom-links ul li i{
    font-size: 12px;
    margin-right: 8px;
}

.page2 .foot-bottom-links ul li a{
    color: #fff;
}

.tabs1 .active{
    color: var(--orange-color) !important;
    border: 1px solid var(--orange-color) !important;
    background-color: #fff5f0 !important;
    border-radius: 30px !important;
}

.tabs1{
    margin-top: 10px;
}

.tabs1 .btn-secondary{
    width: 100%;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
    font-size: 11.8px;
    transition: 1s;
    border: none;
}

.tabs1 .btn-secondary:hover {
    color: var(--orange-color);
    border: 1px solid var(--orange-color);
    background-color: #fff5f0;
    border-radius: 30px;
    transition: 1s; 
}

.tabs1 .dropdown-menu{
    width: 100%;
}

.tabs1 .dropdown-item{
    font-size: 12px;
    padding: 7px;
}

.active-drop1 .dropdown-menu{
    border: 1px solid var(--orange-color);
    border-radius: 5px;
    padding: 7px;
}

.active-drop1 .dropdown-item:hover{
    background-color: #f6783d21;
    border-radius: 30px;
    padding: 9px 15px;
}

.active-drop1 .fa-angle-right{
    margin-right: 5px;
}

.btn-secondary.active:focus{
    box-shadow: none;
}

.heading5{
    font-size: 18px;
    font-weight: 400;
}

.btn-secondary:focus{
    box-shadow: none;
}

.total-sec1 {
    background-color: #fff;
    padding: 5px;
    width: 98.5%;
    margin-top: 15px;
    margin-left: 8px;
    border-radius: 15px;
}

.total-sec-col1{
    width: 19%;
    background-color: var(--white-bg);
    padding: 8px;
    border-radius: 5px;
    float: left;
    margin: 0px 4px;
}

.total-sec-col1 h6{
    font-size: 15px;
}

.total-sec-col1 h4{
    color: var(--dark-sky-color);
    margin: 0px 0px;
    font-size: 18px;
}

.total-sec-col1 .progress{
    border-radius: 15px;
}

.total-sec-col1 .progress-bar{
    width: 60%;
    background-color: var(--dark-sky-color);
}

.total-sec-col1 p{
    font-size: 12px;
    color: #666;
    margin: 5px 0px 8px;
}

.total-sec-col1 a{
    font-size: 10.5px;
    color: #666;
}

.clauses-progress-bar1 .progress{
    border-radius: 20px;
    height: 7px;
}

.clauses-progress-bar1 .progress-bar{
    width: 60%;
    background-color: var(--light-sky-color);
}

.clauses-box1{
    background-color: #fff;
    padding: 15px;
    margin-top: 20px;
    border-radius: 15px;
}
 
.clauses-box1 h6{
    font-size: 15px;
    font-weight: 700;
    color: #000;
}

.clauses-box1 a{
    color: var(--orange-color);
    border: 1px solid var(--orange-color);
    border-radius: 30px;
    padding: 7px 15px;
    font-size: 14px;
    float: right;
}

.more-btn{
    color: var(--orange-color);
    border: 1px solid var(--orange-color);
    border-radius: 30px;
    padding: 7px 15px;
    font-size: 14px;
    float: right;
}

.clauses-progress-bar-txt{
    display: flex;
    position: relative;
    margin-bottom: 7px;
}

.clauses-progress-bar-txt .per-txt{
    position: absolute;
    right: 0;
}

.clauses-progress-bar-txt p{
    font-size: 12px;
}

.clauses-progress-bar1{
    margin-top: 15px;
}

.control-progress-bar1 .progress{
    height: 4px;
}

.control-sec1 {
    display: flex;
    position: relative;
    margin-top: 11px;
}

.control-sec1 .control-p2{
    position: absolute;
    right: 0;
}

.control-progress-bar1{
    position: relative;
    padding-left: 47px;
}

.control-progress-bar1::before{
    content: "";
    position: absolute;
    background-color: var(--blue-color);
    width: 27px;
    height: 27px;
    border-radius: 50%;
    left: 10px;
}

.control-progress-bar2::before{ 
    background-color: var(--dark-sky-color); 
}

.control-progress-bar3::before{ 
    background-color: var(--orange-color); 
}

.control-progress-bar4::before{ 
    background-color: var(--light-sky-color); 
}

.control-progress-bar1 .progress-bar{
    background-color: var(--blue-color);
}

.control-progress-bar2 .progress-bar{
    background-color: var(--dark-sky-color);
}

.control-progress-bar3 .progress-bar{
    background-color: var(--orange-color);
}

.control-progress-bar4 .progress-bar{
    background-color: var(--light-sky-color);
}
 
#morris-donut-2 {
    width: 250px;
    height: 150px;
    position: relative;
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
    margin-left: 15%;
}

#morris-donut-1 {
    width: 250px;
    height: 150px;
    position: relative;
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
    margin-left: 15%;
} 
/* ============ // Page 2 css ============= */

/* ======== Page 3 css ======== */
.soa-banner{
    background-image: url(../img/banner1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    margin-top: 15px;
    margin-left: 0;
    border-radius: 15px;
    padding: 13px 5px;
}
 
.soa-banner h3{
    color: #fff;
    font-size: 18px;
}

.page-btn2{
    float: right;
    background-color: #fff;
    padding: 7px 26px;
    font-size: 15px;
    border-radius: 30px;
    color: var(--orange-color);
}

.page3-col-bg{
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    margin: 0px;
    margin-top: 20px;
}

.inner-pge-bg{
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    margin: 0px;
    margin-top: 20px;
}

.page3-col6bg{
    background-color: var(--white-bg);
    padding: 10px;
    border-radius: 10px;
}

.page3-col6bg h5{
    font-size: 14px;
    position: relative;
    top: 4px;
}

.page3-col6bg h6{
    font-size: 13px;
    font-weight: 400;
    margin: 4px 0px;
}  

.green-bar{
    height: 4px !important;
}

.green-bar .progress-bar{
    background-color: var(--green-color);
}

.yellow-bar{
    height: 4px !important;
}

.yellow-bar .progress-bar{
    background-color: var(--yellow-color);
}

.blue-bar{
    margin-top: 20px !important;
}

.blue-bar .progress-bar{
    width: 30%;
    /* background-color: #444a86; */
    background-color: var(--blue-color);
}

.sky-bar .progress-bar{ 
    background-color: var(--dark-sky-color);
}

.orange-bar .progress-bar{ 
    background-color: var(--orange-color);
}

.light-sky .progress-bar{ 
    background-color: var(--light-sky-color);
}

.control-row2{
    margin-top: 20px;
}

.page3-chart1 svg{
    margin-left: -60px;
}

.page3-chart1 h6{
    font-weight: bold;
    font-size: 17px;
}

.page3-chart1-2{
    float: right;
    position: relative;
    top: 25px;
}

.page3-chart-control ul li{
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--Body-Text);
    float: left;
    margin-right: 20px;
}

.page3-chart-control .blue-li-bg{
    position: relative;
    margin-left: 22px;
}

.page3-chart-control .blue-li-bg::before{
    content: "";
    position: absolute;
    background-color: var(--blue-color);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    left: -22px;
    top: 0px;
}

.page3-chart-control .Darksky-li-bg{
    position: relative;
    margin-left: 22px;
}

.page3-chart-control .Darksky-li-bg::before{
    content: "";
    position: absolute;
    background-color: var(--dark-sky-color);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    left: -22px;
    top: 0px;
}

.page3-chart-control .orange-li-bg{
    position: relative;
    margin-left: 22px;
}

.page3-chart-control .orange-li-bg::before{
    content: "";
    position: absolute;
    background-color: var(--orange-color);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    left: -22px;
    top: 0px;
}

.page3-chart-control .lightsky-li-bg{
    position: relative;
    margin-left: 22px;
}

.page3-chart-control .lightsky-li-bg::before{
    content: "";
    position: absolute;
    background-color: var(--light-sky-color);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    left: -22px;
    top: 0px;
}

#morris-donut-3 {
    width: 120px;
    height: 120px;
}

#morris-donut-4{
    width: 120px;
    height: 120px;
}

.page3-chart2{
    position: relative;
    top: 25px;
    left: 12%;
}

.page3-chart-control{
    margin-top: 10px;
}

.page3-chart-control2{
    float: right;
    margin-top: 10px;
}

.page3-chart-control2 ul li{
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--Body-Text);
    float: left;
    margin-left: 20px;
}

.page3-chart-control2{

}

.page3-chart-control2 .risk{
    position: relative;
    margin-left: 35px;
}

.page3-chart-control2 .risk::before{
    content: "";
    position: absolute;
    background-color: var(--red-bg);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    left: -22px;
    top: 0px;
}

.page3-chart-control2 .progessing{
    position: relative;
    margin-left: 35px;
}

.page3-chart-control2 .progessing::before{
    content: "";
    position: absolute;
    background-color: var(--yellow-color);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    left: -22px;
    top: 0px;
}

.page3-chart-control2 .completed{
    position: relative;
    margin-left: 35px;
}

.page3-chart-control2 .completed::before{
    content: "";
    position: absolute;
    background-color: var(--green-color);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    left: -22px;
    top: 0px;
}
/* ========= // Page 3 css ======= */



/* ========= Page 4 css ======= */
.page4 .heading5 span{
    font-size: 13px;
    margin-left: 20px;
    font-weight: 500;
}

.form-control{
    appearance: auto;
}

select{
    appearance: auto;
}

.form-control:focus{
    box-shadow: none;
}

.accord-row1{
    display: flex;
}

.accord-row1 i{
    margin-right: 20px;
    position: relative;
    top: 5px;
    border: 1px solid #bbb;
    padding: 2px;
    height: fit-content;
}

.accord-row1 h6{
    font-size: 14px;
    font-weight: 600;
}

.border-line{
    border: 1px solid #c3c3c3;
    margin: 14px 0px;
} 

.select-drop1 .form-control{
    font-size: 13px;
}

.add-new-btn{
    background-color: var(--orange-color);
    color: #fff;
    border-radius: 30px;
    padding: 7px 10px;
    font-size: 12.5px;
    float: right;
}

.add-new-btn:hover{
    background-color: var(--dark-sky-color);
    color: #fff;
}
 
.drop-width1{
    width: 45%;
    position: relative;
}

.select-drop2{
    position: relative;
}

.select-drop2 select{ 
    border: 1px solid #ced4da;
    border-radius: 5px;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding: 6px 27px 6px 10px;
    background: transparent;
    z-index: 100;
    position: relative;
    font-size: 13px;
}
 
.select-drop2::after {
    content: "\f107";
    position: absolute;
    top: 8px;
    right: 10px;
    font-family: "FontAwesome";
    font-size: 18px;
}

.select-drop2::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background: #ccc;
    top: 0;
    right: 30px;
}

.drop-list1{
    margin-top: 20px;
}

.drop-list1 ul li{
    width: 108px;
    float: left;
    margin-right: 12px;
}

.drop-list1 input{
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 6px 27px 6px 10px;
    font-size: 13px;
}

.calender-input{
    position: relative;
}

.calender-input::after {
    content: "\f073";
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: "FontAwesome";
    font-size: 13px;
}

.calender-input::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background: #ccc;
    top: 0;
    right: 30px;
}

.file-input{
    position: relative;
}

.file-input:after {
    content: "\f093";
    position: absolute;
    top: 2px;
    right: 2px;
    font-family: "FontAwesome";
    font-size: 13px;
    background-color: #fff;
    padding: 8px;
}

.file-input::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background: #ccc;
    top: 0;
    right: 30px;
}

.page4-accordian .accordion-button::after{
    position: absolute;
}

.page4-accordian .accordion-button{
    font-size: 14px;
    font-weight: 600;
    padding-left: 36px;
    padding-bottom: 21px;
    margin-bottom: 8px;
}

.page4-accordian .accordion-button:not(.collapsed){
    color: #000;
}

.page4-accordian .accordion-button:not(.collapsed)::after{
    background-image: none;
    content: "\f068";
    font-family: "FontAwesome";
    left: 10px;
    font-size: 12px;
    top: 9px;
}

.page4-accordian .accordion-button::after{
    background-image: none;
    content: "\f067";
    font-family: "FontAwesome";
    left: 13px;
    font-size: 12px;
    top: 9px;
}

.page4-accordian{
    margin-top: 30px;
    position: relative;
}

.page4-accordian .accordion-button:not(.collapsed){
    background-color: var(--white-bg);
}

.page4-accordian .accordion-body {
    padding: 1rem 10px;
}

.page4-accordian .accordion-button:focus{
    border-color: none;
    box-shadow: none;
}

.page4-accordian .accord-drop1{
    position: absolute;
    z-index: 9;
    right: 9px;
    top: 4px;
}

.page4-accordian .accordion-item{
    border: none;
}
 
.table1 thead th{
    border: none;
    font-size: 14px;
    padding-bottom: 25px;
}

.table1 tbody td{
    border: none;
    font-size: 14px;
    padding: 15px 5px;
}

.table1 table{
    border: none;
}

.table1 tbody td:first-child{
    font-weight: bold;
}

.edit-btn a{
    color: var(--orange-color);
    font-weight: bold;
    border-bottom: 1px solid;
}

.page4 .heading5{
    font-weight: bold;
}
/* ========= // Page 4 css ======= */



/* ========= Page 5 css ======= */
.inner-pge-bg .heading3{
    font-size: 19px;
}

.btn-design1 {
    background-color: var(--orange-color);
    color: #fff;
    border-radius: 30px;
    padding: 9px 15px;
    font-size: 14px;
    float: right;
}

.btn-design1:hover{
    background-color: var(--dark-sky-color);
    color: #fff;
}

.form-sample1{
    margin-top: 15px;
    margin-bottom: 40px;
}  

.form-sample1 label{
    font-size: 13px;
    color: #000;
    margin-bottom: 10px;
}

.form-sample1 .form-control{
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 6px 27px 6px 10px;
    font-size: 12.5px;
}

.table2 thead th:nth-child(3){
    width: 40%;
}

.table2 tbody td{
    line-height: 22px;
    padding: 10px 5px;
    border-bottom: 1px solid #dfdfdf;
}

.ref-txt{
    color: var(--dark-sky-color);
}

.table2 tbody td:first-child {
    font-weight: unset;
}
/* ========= // Page 5 css ======= */



/* ========= Page 6 css ======= */
.page6 .clauses-chart-txt1{
    text-align: center;
}

.page6 .clauses-chart-txt1 p{
    font-size: 11px;
}

.p6-txt-p{
    position: relative;
    top: 21px;
    color: #000;
}

.p6-chart-col1 .more-btn{
    position: relative;
    top: 35px;
}

.p6-chart-col1{
    margin-bottom: 40px;
}

#morris-donut-5{
    width: 80px;
    height: 80px;
    display: block;
    margin: auto;
}

#morris-donut-6{
    width: 80px;
    height: 80px;
    display: block;
    margin: auto;
}

#morris-donut-7{
    width: 80px;
    height: 80px;
    display: block;
    margin: auto;
}

#morris-donut-8{
    width: 80px;
    height: 80px;
    display: block;
    margin: auto;
}

#morris-donut-9{
    width: 80px;
    height: 80px;
    display: block;
    margin: auto;
}

#morris-donut-10{
    width: 80px;
    height: 80px;
    display: block;
    margin: auto;
}

#morris-donut-11{
    width: 80px;
    height: 80px;
    display: block;
    margin: auto;
}

.page6 .progress-bar{
    width: 70%;
}

.page6 .progress{
    height: 5px !important;
    margin-top: 4px;
}

.p6-progress-txt{
    float: right;
    font-size: 12px;
    margin-top: 5px;
}
/* ========= // Page 6 css ======= */


/* ========= Page 7 css ======= */
.page7-col1{
    display: flex;
    position: relative;
    margin-bottom: 15px;
}

.page7-col{
    margin-top: 25px;
}

.page7-col1 h6{
    background-color: #737aab;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 10px;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 15px;
}

.page7-col1 p span{
    display: block;
}

.page7-col1 .more-btn{
    position: absolute;
    right: 0;
}

.page7 .progress-bar {
    width: 30%;
    background-color: var(--dark-sky-color);
}

.page7-col2{
    margin-top: 60px;
}

#morris-donut-12{
    width: 270px;
    height: 270px;
    display: block;
    margin: auto;
}

.page7-chart-col{
    position: relative;
    top: 50px;
}

.page7-chart-col h6{
    text-align: center;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 18px;
}
/* ========= // Page 7 css ======= */



/* ========= Page 8 css ======= */
.bread-txt2{
    margin-left: 0 !important;
    font-weight: 500 !important;
}

.inner-bread-txt .heading5 span{
    font-weight: 300;
}

.p8-head-txt{
    display: flex;
    position: relative;
}

.p8-head-txt p{
    position: absolute;
    right: 0;
    top: 7px;
}

.p8-col4{
    background-color: #fff;
    padding: 5px;
    border-radius: 15px;
}

.p8-list-line1{
    display: flex;
    margin: 10px 0px;
}

.p8-listp1{
    width: 36%;
    position: relative;
    font-weight: 600;
    color: #818181;
    font-size: 13px;
}

.p8-listp1 span{
    position: absolute;
    right: 0;
    margin-right: 6px;
    font-weight: 600;
    color: #818181;
}

.p8-listp2{
    color: #000;
    font-weight: 500;

}

.p8-list1{
    padding: 0px 16px;
}

.p8-col4 h5{
    background-color: #737aab;
    color: #fff;
    border-radius: 10px 10px 0px 0px;
    padding: 5px 16px;
    font-size: 16px;
    font-weight: 500;
}

.p8-col4-line1{
    margin-bottom: 20px;
}

.simple-pera{
    padding: 10px 0px 0px;
    color: #000;
    font-weight: 500;
}

.modified-txt{
    font-size: 12px;
}

.p8-list2{
    margin-top: 20px;
}

/* visual editor css */
#wysiwyg select {
    background-color: white;
    border: none;
    padding: 0.5em 0.8em;
    border-radius: 4px;
    color: grey;
    cursor: pointer;
    outline-style: none;
    font-size: 16px;
    font-family: "Roboto", sans-serif;
}

#wysiwyg input {
    background-color: white;
    border: none;
    padding: 0.5em 0.8em;
    border-radius: 4px;
    color: grey;
    cursor: pointer;
    outline-style: none;
    font-size: 16px;
    font-family: "Roboto", sans-serif;
}

#wysiwyg button {
    background-color: white;
    border: none;
    padding: 0.5em 0.8em;
    border-radius: 4px;
    color: grey;
    cursor: pointer;
    outline-style: none;
    font-size: 16px;
    font-family: "Roboto", sans-serif;
}


#wysiwyg select:hover, input:hover, button:hover {
    background-color: #EFEFEF;
    color: black;
}

#editor p{
    background-color: #fff;
    padding: 25px;
    border: 1px solid #ccc;
    color: #000;
    line-height: 24px;
    text-align: justify;
    height: 100vh;
}
  
#wysiwyg select:not(:last-child), input:not(:last-child), button:not(:last-child) {
    margin-right: 4px;
}

#wysiwyg  select[type=color], input[type=color], button[type=color] {
    width: 1.2em;
}

#wysiwyg select[type=number], input[type=number], button[type=number] {
    width: 3em;
}
  
#wysiwyg {
    border-radius: 8px;
    width: 100%;
    /* max-width: 600px; */
    max-height: 100%;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 25px;
}

#wysiwyg .btns {
    padding: 0.3em 0.3em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #EFEFEF;
    background-color: #e8e8e8;
    flex-grow: 2;
}

#wysiwyg .btns .category {
    display: flex;
    align-items: center;
    border-right: 1px solid #EFEFEF;
    padding: 0 4px;
    margin-bottom: 7px;
}

#wysiwyg #editor {
    resize: none;
    background-color: #e8e8e8;
    outline-style: none;
    border: none;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    max-height: calc(100vh);
    /* overflow: auto; */
}

#wysiwyg #editor img {
    max-width: 100%;
}

#wysiwyg h1 {
    font-size: 30px;
}

.editor-p-bottom{
    background-color: #e8e8e8;
    border-top: 1px solid #ccc;
    padding: 4px 13px;
    font-size: 12px;
}
/* // visual editor css */
/* ========= // Page 8 css ======= */


/* ========= Page 9 css ======= */
.inner-model1 .modal-body h1 {
    font-weight: 900;
    font-size: 2.3em;
    text-transform: uppercase;
}

.inner-model1 .modal-body a.pre-order-btn {
    color: #000;
    background-color: gold;
    border-radius: 1em;
    padding: 1em;
    display: block;
    margin: 2em auto;
    width: 50%;
    font-size: 1.25em;
    font-weight: 6600;
}

.inner-model1 .modal-body a.pre-order-btn:hover {
    background-color: #000;
    text-decoration: none;
    color: gold;
}

.inner-model1 .modal-dialog{
    max-width: 750px;
}

.inner-model1 p{
    margin-bottom: 20px;
    color: #000;
    line-height: 24px;
    font-size: 13.5px;
}

.inner-model1 .btn-design1{
    float: left;
}

.inner-model1 .modal-content{
    padding: 15px 25px;
    border-radius: 15px;
}

.ai-logo {
    display: flex;
}

.ai-logo img{
    width: 45px;
    height: 45px;
    margin-right: 15px;
}

.ai-txt h6{
    font-size: 15px;
}

.ai-txt p{
    margin-bottom: 0;
}

.inner-model1 .modal-header{
    border-bottom: none;
}

.inner-model1 .close{
    font-size: 25px;
    overflow: hidden;
}

.inner-pge-tbl1{
    margin-top: 20px;
}

.inner-pge-tbl1 tbody td:first-child {
    font-weight: normal;
}

.major-td {
    position: relative;
    padding: 18px !important;
}

.major-td::before{
    content: "";
    position: absolute;
    background-color: var(--red-bg);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #fff;
    left: 0;
}
/* ========= // Page 9 css ======= */



/* ========= Page 11 css ======= */
.inner-form1-start{
    margin-top: 25px;
}

.inner-form1-start label{
    font-size: 14px;
    margin-bottom: 8px;
    color: #000;
}

.inner-form1-start select{
    color: #a3a3a3;
}

.inner-form1-start input{
    border: 1px solid #ced4da !important;
    border-radius: 5px !important;
    padding: 6px 27px 6px 10px !important;
    background: transparent;
    font-size: 13px !important;
}

.second-form-row{
    margin-top: 10px;
}

.inner-form1-start .form-group{
    margin-bottom: 25px;
}

.inner-form1-start textarea{
    height: auto !important;
}

.inner-form1-start p{
    float: right;
    color: #a3a3a3;
    margin: 7px 0px;
    font-size: 13px;
}

.inner-form1-start .btn-design1{
    float: left;
}

.profile-pic{
    display: flex;
}

.profile-pic img{
    width: 10%;
    margin-right: 15px;
}

.profile-txt{
    position: relative;
    top: 10px;
}

.profile-txt h5 {
    font-size: 17px;
}

.del-upd-btn{
    display: flex;
    float: right;
}

.del-btn a{
    color: #919191;
    font-weight: 500;
    font-size: 16px;
}

.upd-btn a{
    color: var(--orange-color);
    font-weight: 500;
    font-size: 16px;
    margin-left: 22px;
}

.page12 .heading3{
    margin-bottom: 20px;
}

.pge12-row-padd{
    padding: 0px 50px;
}

.p12-border{
    border: 1px solid #9d9d9d;
    margin: 30px 0px;
}

.cancle-btn{
    font-size: 15px;
    color: #919191;
    font-weight: 500;
    position: relative;
    top: 10px;
    left: 25px;
}
/* ========= // Page 11 css ======= */



/* ========= Page 13 css ======= */
.page13 h6{
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 23px;
}

.p13-form-col p{
    float: left;
}

.p13-form-col{
    width: 20%;
}

.p13-form-col h6{
    margin-bottom: 15px;
    font-size: 14px;
}

.second-form-row h6{
    margin-bottom: 15px;
}

.access-btn{
    color: var(--orange-color);
    border: 1px solid var(--orange-color);
    border-radius: 30px;
    padding: 7px 15px;
    font-size: 14px;
}
/* ========= // Page 13 css ======= */


/* ========= Page 15 css ======= */
.p15-head{
    margin: 25px;
}

.p15-head ul li {
    float: left;
    width: 20%;
}

.p15-head ul{
    position: relative;
}

.p15-head ul::before{
    content: "";
    position: absolute;
    border: 1px solid #dfdfdf;
    width: 96%;
    z-index: -1;
    top: 14px;
}

.p15-head ul li i{
    font-size: 23px;
    margin-right: 6px;
    position: relative;
    top: 2px;
}

.p15-head ul li a{ 
    font-size: 14px;
    color: #7c7c7c;
    font-weight: 600;
    border: 1px solid #dfdfdf;
    padding: 11px;
    border-radius: 4px;
    background-color: #fff;
}

.p15-head ul li a:hover{
    color: var(--orange-color);
}

.p15-head .p15-active a{
    color: #000;
    position: relative;
}

.p15-head .p15-active a::after{
    content: "";
    position: absolute;
    border: 1px solid var(--orange-color);
    width: 45px;
    z-index: -1;
    top: 19px;
}

.p15-form-col{
    margin-top: 30px;
    width: 80%;
}

.p15-form-col h3{
    font-weight: 500;
    font-size: 24px;
    margin: 6px 0px;
}

.p15-form-col p{
    font-size: 13px;
}

.p15-form-col p a{
    color: var(--dark-sky-color);
}

.p15-form-col form{
    margin-top: 35px;
}

.p15-form-col .form-group{
    margin-bottom: 30px;
}

.p15-form-col label{
    font-size: 13px;
    font-weight: bold;
    color: #000;
    margin-bottom: 12px;
}

.p15-form-col select{
    padding: 14px 6px;
    border: 1px solid #ccc;
}

.submit-btn{
    font-weight: 500;
    width: 100%;
    font-size: 16px;
    background-color: var(--orange-color);
    color: #fff;
    border-radius: 30px;
    padding: 10px 0px;
    margin-bottom: 25px;
}

.submit-btn:hover{
    background-color: var(--dark-sky-color);
    color: #fff;
}

.p15-txt-col{
    background-image: url(../img/p15-img2.png);
    background-size: cover;
    padding-bottom: 130px;
    padding-top: 30px;
}

.p15-txt-col h2{
    font-weight: 500;
    font-size: 46px;
    color: var(--orange-color);
    line-height: 60px;
}

.p15-txt-col h2 span{
    display: block;
}

.txt-col1{
    border: 1px solid var(--dark-sky-color);
    border-radius: 15px;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    width: 50%;
    margin: 50px 200px 80px;
}

.txt-col1 p{
    padding: 25px;
    line-height: 23px;
    color: #3465f4;
}

.container2 {
    max-width: 1260px;
}

.p15-copyright-sec p{
    font-size: 11px;
}

.p15-copyright-sec p span{
    padding-left: 32px;
    color: #959595;
}

.p15-copyright-sec img{
    float: right;
    width: 50px;
}

.p15-copyright-sec {
    position: absolute;
    bottom: 0;
    width: 47%;
    margin-bottom: 20px;
}

.radio-group1{
    display: flex;
}

.radio-group1 input[type=radio]{
    width: 15px;
    position: relative;
    top: -4px;
    margin-left: 17px;
}

.p16-radio{
    display: flex;
    position: absolute;
    right: 0;
}

.perv-btn1{
    font-weight: 500;
    width: 100%;
    font-size: 16px;
    background-color: #F2F7FB;
    color: #000;
    border-radius: 30px;
    padding: 10px 0px; 
}

.p-16-head .p15-active a::after{
    width: 100%;
}

.p15-head .p16-active2 a{
    position: relative;
}

.p15-head .p16-active2 a::after {
    content: "";
    position: absolute;
    border: 1px solid var(--orange-color);
    width: 45px;
    z-index: -1;
    top: 19px;
}

.p15-head .p16-active2 a {
    color: #000;
    position: relative;
}

.p-16-1-addbtn{
    position: relative;
    top: -17px;
}

.page16-2form textarea {
    height: unset !important;
    border-radius: 12px;
    padding: 14px 6px;
}

.page16-2form label span{
    color: #afafaf;
}

.p16-2 .p16-active2 a::after{
    width: 100%;
}

.p16-2-active a{
    position: relative;
}

.p16-2-active a::after{
    content: "";
    position: absolute;
    border: 1px solid var(--orange-color);
    width: 45px;
    z-index: -1;
    top: 19px;
}

.v-doc-tab a::after{
    width: 100%;
}

.p16-5-active a{
    position: relative;
}

.p16-5-active a::after{
    content: "";
    position: absolute;
    border: 1px solid var(--orange-color);
    width: 45px;
    z-index: -1;
    top: 19px;
}

.pro-ser-tab a::after{
    width: 100%;
}
/* ========= // Page 15 css ======= */


/* ========= Page 17 css ========= */
.tab {
    overflow: hidden;
    margin-top: 10px;
}
  
.tab button {
    background-color: #fff;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 11px 12px;
    transition: 0.3s;
    font-size: 15px;
    font-weight: 500;
}
  
.tab button:hover {
    background-color: #ddd;
}
  
.tab button.active {
    background-color: #fff;
    border: 1px solid #788dff;
    border-bottom: none;
    font-weight: 600;
    color: #000;
}
  
.tabcontent {
    display: none;
    padding: 6px 8px 0px;
}

.p17-head-txt{
    background-color: #cfd2e2;
    padding: 6px 8px 0px;
}

.audit-btn{
    float: right !important;
    position: relative;
    top: 21px;
}

.quartarly1-row{
    margin-top: 20px;
}

.quartarly1-row .heading3{
    font-size: 17px;
}

.quartarly1-row .table1 thead th{
    padding-bottom: 10px;
    width: 13%;
}

.quartarly1-row .inner-pge-tbl1 .form-group{
    margin-bottom: 0;
}

.border-line2{
    border: 1px solid #c3c3c3;
    margin: 8px 0px;
} 

#AuditChecklist .form-group{
    margin-bottom: 15px;
}

#AuditReport .btn-design1{
    margin-right: 15px;
    font-size: 14px;
}

#AuditReport .cancle-btn{
    left: 0;
}
/* ========= // Page 17 css ======== */


/* ========= Page 18 css ======== */
.inner-pge-tbl2 .form-group{
    margin-bottom: 0;
}

/* .p18-pge .more-btn{
    float: unset;
    position: relative;
    top: 11px;
} */

.p18-pge [type="button"] a{
    margin-left: 10px;
}
/* ========= // Page 18 css ======== */


/* ========= Page 19 css ======== */
.p19-pge .btn-design1{
    margin-right: 10px;
}

.p19-pge .table1 tbody td{
    padding: 15px 5px 0px;
}

.p19-pge .table1 tbody td:first-child {
    font-weight: normal;
}

.p19-pge .table1 textarea{
    position: relative;
    top: -6px;
    border-radius: 4px;
}

.add-new-popup .modal-dialog{
    max-width: 750px;
}

.add-new-popup .modal-content {
    padding: 15px;
    border-radius: 15px;
}
/* ========= // Page 19 css ======== */


/* ========= Page 20 css ======== */
.page20 .del-upd-btn{
    float: unset;
    position: relative;
    top: 18px;
}

.page20 .del-upd-btn p{
    margin: 10px;
}

.page20 label{
    font-size: 14px;
    margin-bottom: 8px;
    color: #000;
}

.p20-form-row{
    margin: 15px 0px 20px;
}

.p20-popup .modal-dialog {
    max-width: 900px;
}

.green-txt1{
    display: flex;
    margin: 15px 0px;
}

.green-txt1 p{
    position: relative;
    top: -6px;
    font-size: 14px;
    color: #1ba86c;
}

.green-txt1 p i{
    font-size: 19px;
    margin-right: 10px;
    position: relative;
    top: 2px;
}

.green-txt1 p:nth-child(2){
    margin-left: 25px;
}

.green-txt1 a{
    position: absolute;
    right: 0;
    font-size: 14px;
    background-color: #1ba86c;
    color: #fff;
    padding: 10px 10px;
    border-radius: 5px;
}

.green-txt1 a:hover{
    background-color: var(--orange-color);
}
/* ========= // Page 20 css ======== */


/* ========= Page 22 css ======== */
.p21 .add-btn {
    position: relative;
    top: 6px;
}

.p21 .btn-design1 {
    float: right;
}

.add-btn a{
    color: var(--orange-color);
    font-weight: bold;
    font-size: 14px;
}

.p22-tbl1 h5{
    float: left;
    font-size: 16.5px;
}

.p22-tbl1 a{
    float: right;
    color: var(--orange-color);
    position: relative;
    top: 6px;
}

.p22-tbl1 tbody td{
    line-height: 18px;
    vertical-align: baseline;
}

.p22-tbl1 tbody tr:first-child{
    background-color: transparent;
}

.p22-tbl1 thead th{
    padding: 3px 4px;
    color: #000000;
    font-size: 14px;
}

.p22-tbl1 .table{
    margin-top: 45px;
}

.p22-tbl1 .major-td::before{
    top: 21px;
    left: 20px;
}

.p22-pge-bg{
    margin-top: 20px;
}

.p22-tbl1{
    border-radius: 15px;
    margin-bottom: 15px;
}

.p22-tbl1 thead th:last-child{
    text-align: center;
}

.minor-td{
    position: relative;
    padding: 0px 18px !important;
}

.minor-td::before{
    content: "";
    position: absolute;
    background-color: var(--yellow-color);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #fff;
    left: 20px;
    top: 8px;
}

.p22-tbl1 th{
    width: 25%;
}

.p22-tbl1 .title-th{
    width: 30%;
}

.p22-pge-bg .dashboard-tbl1{
    margin-bottom: 15px;
    height: 189px;
}

.p22-tbl1 .dashboard-tbl1 h5 i{
    color: #858585;
    position: relative;
    top: -5px;
    left: 14px;
    border: 1px solid #858585;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    margin: 0px 10px 0px 0px;
    font-size: 17px;
}

.p22-tbl1 .dashboard-tbl1 h5 .fa-angle-right{
    color: var(--orange-color);
    border: 1px solid;
}
/* ========= // Page 22 css ======== */


/* ========= Login Page css ======== */
.checkbox-group{
    float: left;
    position: relative;
    top: -4px;
} 

.login-col5 label{
    font-size: 15px;
    margin-bottom: 8px;
    color: #000;
}

.login-col5 input{
    border: 1px solid #ced4da !important;
    border-radius: 5px !important;
    padding: 11px 10px 11px 10px !important;
    background: transparent;
    font-size: 13px !important;
}

.login-col5 .form-group {
    margin-bottom: 20px;
}

.login-col5 input[type="checkbox"]{
    width: 13px;
    position: relative;
    top: 3px;
}

.forgot-txt{
    float: right;
    color: var(--orange-color) !important;
    font-size: 14px;
    font-weight: 600;
}

.forgot-txt:hover{
    color: var(--dark-sky-color) !important;
}

.signin-btn{
    width: 100%;
    font-size: 16px;
    text-transform: uppercase;
    background-color: var(--orange-color);
    color: #fff;
    padding: 11px 7px;
    margin-top: 20px;
    font-weight: 600;
    border-radius: 30px;
}

.signin-btn:hover{
    background-color: var(--dark-sky-color);
    color: #fff;
}

.login-col5 img{
    width: 25%;
    height: auto;
}

.login-col5 h4{
    color: var(--orange-color);
    font-size: 22px;
    margin: 25px 0px;
}

.login-col5 h5{
    font-size: 17px;
    margin-bottom: 5px;
}

.login-col5 p{
    font-size: 13px;
    margin-bottom: 20px;
}

.login-img{
    width: 100%;
    height: auto;
}

.login-body{
    background-color: #cfd2e2;
}

.login-pge-col8{
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    margin-top: 40px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
/* ========= // Login Page css ======== */


/* ======== Login page 2 css here ======== */
.login-pge2 h3{
    font-weight: 400;
    font-size: 26px;
    margin-bottom: 10px;
}

.login-pge2 p a{
    color: var(--dark-sky-color);
    text-decoration: underline;
}

.login-pge2 form{
    margin-top: 40px;
}

.login-pge2 form label{
    font-weight: 600;
}

.login-pge2 .checkbox-group label{
    color: #767676;
}

.login-footer p span{
    display: block;
    font-size: 10px;
}

.login-footer p{
    text-align: end;
    position: relative;
    left: 0;
    font-size: 12px;
}

.login-footer img{
    width: 63px;
}
 

.password-group1{
    position: relative;
}

.password-group1 i{
    position: absolute;
    top: 36px;
    right: 12px;
    font-size: 17px;
    color: #767676;
}

.login-pge2 .login-col5{
    padding: 50px 100px 0px 30px;
}

.login-pge2 .container-fluid{
    padding: 20px;
}

.login-pge2 .login-img{
    width: 90%;
}

.login-pge2 .signin-btn{
    margin-bottom: 60px;
}
/* ======== // Login page 2 css here ======== */











/* ==== Toggle menu css ==== */
.button-show-hide{
    display: none;
}

.button-show-hide i{
    background-color: var(--orange-color);
    color: #fff;
    font-size: 20px;
    padding: 5px;
    border-radius: 5px;
}

.button-show-hide{
    margin-bottom: 15px;
}
/* ==== // Toggle menu css ==== */
 

/* Mobile tab */
@media (max-width: 767px){
    .button-show-hide{
        display: block;
    }   
    .dropdown-menu.show {
        display: block;
        transform: unset !important;
        top: 45px !important;
    }
}
/* // Mobile tab */

/* Tablet tab */
@media (max-width: 992px) and (min-width: 768px){
    .button-show-hide{
        display: block;
    }   
}
/* // Tablet tab */

/* mini Leptop tab */
@media (max-width: 1024px) and (min-width: 991px){
    .page7-col1 p{
        width: 60%;
    }
    .inner-pge-bg .heading3 {
        font-size: 17px;
        width: 80%;
        line-height: 26px;
    }
    .p8-listp1 {
        width: 55%;
        font-size: 12px;
    }
    .p8-listp2{
        width: 45%;
        font-size: 12px;
    }
    .access-btn{
        padding: 7px 6px;
    }
    .total-sec-col1{
        width: 18%;
    }
}
/* // mini Leptop tab */