h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6
{
    font-family: "Poppins", sans-serif !important;   
    font-weight: 500 !important;
}

#wizard { 
    padding: 0 !important;
}
#zoom { 
    padding: 0 !important;
}
#testResult
{
    padding: 0 !important;
}

.custom-modalbox{
    padding: 0 !important;
}

.custom-modalbox .mat-dialog-container{
    padding: 0 !important;
 }
 
 .ant-table-pagination.ant-pagination
 {
     padding: 1px;
 }

.our-mat-expansion-content-body
{
border-top: 1px solid #EAEAEA !important;
padding: 1% !important;
}

.hardTitle
{
    font-size: calc(14px + (16 - 14) * (100vw - 360px) / (1000 - 360)) !important;
    color: white !important;
}
.mat-expansion-panel
{
    box-shadow: none !important;
    border: 1px solid #EAEAEA !important;
}

.mat-expansion-panel-first
{
    box-shadow: none !important;
    border: 1px solid #EAEAEA !important;
}

.mat-expansion-panel-last
{
    box-shadow: none !important;
    border-left: 1px solid #DADCE0 !important;
    border-right: 1px solid #DADCE0 !important;
    border-bottom: 1px solid #DADCE0 !important;
}
.mat-expanded
{
    border: 1px solid #EAEAEA !important;
}

.mat-expansion-panel-header
{
   background-color: #032F54 !important;
   border: none !important;
   color: white !important;
}
.mat-expansion-panel-header:hover
{
    background-color: #083d68 !important; 
    border: none !important;
    color: white !important;
}
.our-border
{
    border: 1px solid #DADCE0 !important;
    box-shadow: none !important;
    width: 100%;
}
.mat-expansion-panel-header-description, .mat-expansion-indicator::after
{
    color: white !important;
}

.mat-expansion-panel-body
{
    padding: inherit !important;
}

/*Tabs */
.custom-modalbox .mat-dialog-container .mat-tab-group.mat-primary .mat-ink-bar, .custom-modalbox .mat-dialog-container .mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: transparent !important;
}
.custom-modalbox .mat-dialog-container .mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination-chevron {
    color: white !important;
    border-color: white !important;
}

.custom-modalbox .mat-dialog-container .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron{
    color: black !important;
    border-color: black !important;
}

.custom-modalbox .mat-dialog-container .mat-tab-list {
    background-color: #155A9E !important;
}

.custom-modalbox .mat-dialog-container .mat-tab-header-pagination {
    background-color: #1d4972;
    color: white !important;
}

.custom-modalbox .mat-dialog-container .mat-tab-header-pagination-chevron {
    border-color: white;
}

.custom-modalbox .mat-dialog-container .mat-tab-labels {
    background-color: #155A9E !important;
    justify-content: space-evenly;
    height: 48px !important;
    display: flex;
}

.custom-modalbox .mat-dialog-container .mat-tab-label {
    font-family: Roboto;
    background-color: #155A9E;
    color: white !important;
    padding: none !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    margin-right: 0.16%;
    min-width: 56px !important;

    margin-top: 5px!important;
    margin-bottom: 5px!important;
    height: 38px !important;
}

.custom-modalbox .mat-dialog-container .mat-tab-label-active {
    font-family: Roboto;
    background-color: #FDE642 !important;
    color: black !important;
    min-width: 56px !important;
}
.custom-modalbox .mat-dialog-container .mat-tab-header {
    height: 48px !important;
}

/*End Tabs */



 .main-content-wrap
{
    padding-top: 1% !important;
}

.filter-label
{
    line-height: 30px;
}

.select-box {
    border-radius: 20px;
    background-color: #F1F1F2;
    padding: 1em;
}
.tree {
    border-radius: 20px;
    background-color: #F1F1F2;
    padding: 1em;
}
.example-tree
{
    background-color: #F1F1F2 !important;
}
.collapsed
{
    background-color: #022E53 !important;
    color: white;
}
.striped:nth-child(even){
    background-color: #E9E9E9;
}
        
.striped:nth-child(odd){
    background-color: white;
}
.customLi{
    list-style: circle;
    text-align: left;
    height: 35px !important;
    padding: 5px !important;
}
.ticketName
{
    height: 30px;
    line-height: 27px;
    display: inline-block;
}
.mat-menu-item .mat-icon-no-color
{
    color: #555555 !important;
}

.mat-menu-item
{
    color: #555555 !important;
}

h1.page-title
{
    padding-top: 5px !important;
    padding-left: 10px !important;
    color: #0459A0 !important;
}
h3.card-title
{
    Font-Size: calc(13px + (14 - 13) * (100vw - 360px) / (1000 - 360)) !important;
}
h4
{
    Font-Size: calc(13px + (14 - 13) * (100vw - 360px) / (1000 - 360)) !important;
}

.tablinks
{
    Font-Size: calc(12px + (14 - 12) * (100vw - 360px) / (1000 - 360)) !important;
}

.ant-table-tbody>tr>td
{
    Font-Size: calc(10px + (11 - 10) * (100vw - 360px) / (1000 - 360)) !important;
}

.imgQuestion
{
    width: calc(99vw - 24px);
    max-width: 100%;
    margin: auto;
}

.buttonsContainer
{
    Font-Size: calc(16px + (18 - 16) * (100vw - 360px) / (1000 - 360)) !important;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl
{
    /*Font-Size: calc(10px + (11 - 10) * (100vw - 360px) / (1000 - 360)) !important;*/
}

.info
{
    Font-Size: calc(7.5px + (10 - 7.5) * (100vw - 360px) / (1000 - 360)) !important;
}

/* Smartphones (portrait) ----------- */
@media only screen and (min-width : 0px) and (max-width : 480px) and (orientation : portrait) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl
    {
        padding-right: 3px !important;
        padding-left: 3px !important;
    }  

    .container, .main-content-wrap
    {
        padding-right: 3px !important;
        padding-left: 3px !important;
        width: 100%;
    }

    .menuBtn
    {
        width: 100%;
        text-align: left !important;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 0px) and (max-width : 900px) and (orientation : landscape) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl
    {
        padding-right: 3px !important;
        padding-left: 3px !important;
    }  

    .container, .main-content-wrap
    {
        padding-right: 3px !important;
        padding-left: 3px !important;
        width: 100%;
    }

    .menuBtn
    {
        width: 100%;
        text-align: left !important;
    }
}

/* iPads (portrait) ----------- */
@media only screen and (min-width : 411px) and (max-width : 1024px) and (orientation : portrait) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl
    {
        padding-right: 3px !important;
        padding-left: 3px !important;
    }  

    .container, .main-content-wrap
    {
        padding-right: 3px !important;
        padding-left: 3px !important;
        width: 100%;
    }   

    .menuBtn
    {
        width: 100%;
        text-align: left !important;
    }
}

/* iPads (landscape) ----------- */
@media only screen and (min-width : 900px) and (max-width : 1024px) and (orientation : landscape) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl
    {
        padding-right: 3px !important;
        padding-left: 3px !important;
    }  

    .container, .main-content-wrap
    {
        padding-right: 3px !important;
        padding-left: 3px !important;
        width: 100%;
    }
}


/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
    .question{
        background-color: white !important;
        border-radius: 15px;
        border: 0.5px solid gray !important;
        padding: 1.5%;
        width: 100%;
    }
}