.login-section{
    width: 100%;
    height:100vh;
    overflow:auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.tabset > label{
    margin:0 5px 0 0;
}
.tabset > input:checked + label{
    color: #06c;
}

@media screen and (min-width:768px) and (max-width:991px){
    .home .icon{
        padding: 0em 1em;
    }
    .home .icon h3{
        margin-bottom: 0;
        font-size: 1.3vw !important;
    }
    .login-image{
        background-size: 100%;
    }
    .breadcrumb-header .back-btn-wrap{
        float:unset !important;
    }
    .breadcrumb-header .back-btn-wrap a{
        padding:6px 18px !important;
    }
    .create-card .card-body .mt-n10{
        margin-top:0 !important;
    }
    .create-card .card-body table tr td{
        font-size:13px !important;
    }
    
    .create-card .card-body .tabset > label{
        font-size:12px;
        padding:8px 18px;
    }
    .custom-panel .padding-20{
        padding:0 !important;
    }
    #steptwo h3,
    #stepthree h3,
    #stepfour h3{
        font-size:14px !important;
        margin-bottom:0;
    }
    #stepfour .accordion-header span{
        font-size:14px;
    }
    #stepfour h4{
        font-size:14px !important
    }
    #stepthree table tr th,
    #stepfour table tr th,
    #stepfive table tr th,
    #stepsix table tr th,
    #stepseven table tr th{
        font-size:14px !important
    }
    #stepfive table tr td h4{
        font-size:14px;
    }
    .step-four-accordion .ditext{
        font-size:14px;
    }
    .datepicker td, .datepicker th{
        font-size:12px !important;
    }
    .sm-flex-column{
        flex-direction: column;
    }
    .sm-mr-0 {
        margin-right:0 !important;
    }
    .sm-mb-10{
        margin-bottom:10px !important;
    }
}

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

.col-xl-4.hbg-shadow
    {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 0;
        margin-right: 0;
    }
    
    .hbg-shadow h3 {
       margin-bottom: 0;
       font-size: 3.3vw !important;
    }
    .col-xl-3.hbg-shadow{
        width: 100%;
        margin-top: 10px;
        margin-bottom: 0;
        margin-right: 0;
    }
    .col-xl-3.bg-shadow{
        width: 100%;
        margin-top: 10px;
        margin-bottom: 0;
        margin-right: 0;
    }
    .bg-shadow h3 {
       margin-bottom: 0;
       font-size: 3.3vw !important;
    }
    .badge .circle i {
    margin-bottom: 20px;
    }
    .badge .circle i
    { 
    margin-bottom:20px;
    font-size: 4.4vw !important;
    }

.col-xl-4.sbg-shadow
    {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 0;
        margin-right: 0;
    }
    .col-xl-6.rbg-shadow
    {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 0;
        margin-right: 0;
    }
    
    .col-xl-6.rbg-shadow h3
    {
        font-size: 14px !important;
    }
    
    .col-xl-4.sbg-shadow h3
    {
         font-size: 14px !important;
    }
      .col-xl-12 .buttons
    {
        margin-top: 35px !important;
    }
    
.panel .panel-body .table thead tr th {
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: 500;
    padding: 1.2em 0px;
    border: none;
    padding-left: 15px;
}
.flex-container .column:last-child {
    margin-right: 0px;
    margin-top: 25px;
}

.left, .right {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
    width: 100% !important;
    height:200px !important;
}
.middle
    {
        width: 100% !important;
        display: flex !important; 
        margin:auto !important;  
        /*padding-top: 60px;*/
    }
    
    /*maherabbas responsive css started*/
    .logo{
        flex-wrap: wrap;
        justify-content:center;
    }
    .logo-wrap{
        width:100%;
    }
    .left-icons{
        order:1;
    }
    .home{
        display: flex;
        flex-direction: column;
    }
    .home .col-xl-4.bg-shadow{
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
        margin-right: 0;
    }
    
    
    .home .bg-shadow:nth-child(2){
        margin-top: 4em !important;
    }
    .home .col-xl-4.bg-shadow:last-child{
        margin-bottom: 5em !important;
    }
    .home .icon{
        padding: 0em 1em;
    }
    .home .icon h3{
        margin-bottom: 0;
        font-size: 14px !important;
    }
    .theme{
        margin:10px 20px;
    }
    .login-image{
        background-size: 65%;
    }
    /*create*/
    .create-card .create-card-header{
        margin-bottom:20px;
    }
    .breadcrumb-header{
        display:flex;
        flex-direction:row;
        align-items: center;
    }
    .breadcrumb-header .col-lg-6 h1{
        margin-bottom:0;
    }
    .breadcrumb-header .back-btn-wrap{
        order:-1;
        display:flex;
        margin-right:10px;
    }
    .breadcrumb-header .back-btn-wrap a{
        padding:6px 18px !important;
    }
    .create-card .card-body .mt-n10{
        margin-top:0 !important;
    }
    .create-card .card-body .tabset > label{
        padding: 8px 15px;    
        font-size:13px;
        margin-bottom:8px;
    }
    .create-card .card-body table tr td{
        font-size:13px !important;
    }
    /*supli_management*/
    .xs-flex-column{
        flex-direction:column;
    }
    .xs-mb-10{
        margin-bottom:10px !important;
    }
    .custom-panel .panel-heading .row{
        display: flex !important;
        flex-wrap: unset;
        align-items: center;
    }
    .custom-panel .padding-20{
        padding:0 !important;
    }
    .custom-panel .panel-body h3{
        font-size:14px !important;
    }
    .custom-panel .flex-container .column{
        margin-right:0;
    }
    .custom-panel .panel-heading .row .text-right{
        display:flex;
        order:-1;
        margin-right:-1px;
        width:unset;
    }
    .panel .panel-heading .title{
        font-size:17px;
    }
    .custom-panel .panel-heading .row .col-sm-6{
        width:unset;
    }
    .custom-panel .form-control,
    .custom-panel .file,
    .custom-panel input[type=file]{
        width: unset !important;
    }
    .change-type-wrap{
        flex-direction:column;
    }
    .change-type-wrap label{
        width:150px;
    }
    #steptwo h3,
    #stepthree h3,
    #stepfour h3{
        font-size:14px !important;
        margin-bottom:0;
    }
    #stepfour .accordion-header span{
        font-size:14px;
    }
    #stepfour h4{
        font-size:14px !important
    }
    #stepthree table tr th,
    #stepfour table tr th,
    #stepfive table tr th,
    #stepsix table tr th,
    #stepseven table tr th{
        font-size:14px !important
    }
    #stepfive table tr td h4,
    .design_risk_analysis span,
    .design_risk_analysis .ditext{
        font-size:14px;
    }
    #hazard-analysis-container input,
    #risk-analysis-container input{
        margin-bottom:10px;
    }
    .table-select-wrap{
        width:200px;
    }
    .step-four-accordion .ditext{
        font-size:14px;
    }
    .datepicker td, .datepicker th{
        font-size:12px !important;
    }
    /*maherabbas responsive css end*/
}
@media screen and (max-width:529px){
    .breadcrumb-header .col-lg-6{
        width:100%;
    }
    .breadcrumb-header{
        flex-direction:column;
    }
    .breadcrumb-header .back-btn-wrap{
       margin-bottom:10px;
        margin-right:0px;
    }
    .create-card .card-body table tr td{
        font-size:12px !important;
    }
}

@media screen and (max-width:375px){
    .home .icon h3{
        margin-bottom: 0;
        font-size: 11px !important;
    }
    .login-image{
        background-size: 85vw;
    }
}
@media screen and (max-width:320px){
    .custom-panel .panel-heading .row .text-right{
        margin-right:0px;
        padding-left:0;
    }
    .custom-panel .panel-heading .row .text-right a{
        padding: 5px 10px !important;
    }
    .panel .panel-heading .title {
        font-size: 15px;
    }
}