/* DataTables controls positioning */
#card-container {
    display: flex;
    flex-direction: column;
}

.dataTables_wrapper {
    order: -1;
}

.yx-table-view.hideCardTile ~ .dataTables_info,
.yx-table-view.hideCardTile ~ .dataTables_paginate {
    display: none;
}

/* Users page: no card view, keep standard block layout */
#firm-user-container #card-container {
    display: block;
}

#firm-user-toolbar-actions .yx-main-options {
    text-align: right;
    margin-bottom: 10px;
}

/* Desktops and laptops ----------- */
@media only screen and (max-width: 1280px) {
    table thead tr th, h4, h5 {
        font-size: 1rem;
    }

    p, .yx-dropdown-inner > .row label, td .yx-credits, button, .button, .size-text-md, ul, ol, dl, h6 {
        font-size: .8rem;
    }

    p {
        line-height: 1.2;
    }

    .yx-test .button.pack-button {
        margin-top: 0px !important;
    }

    .button.pack-button {
        padding: 5px 10px;
        margin-top: 0px;
    }

    .card-section {
        padding: 25px 10px 0;
    }

    .yx-dashboard2 .card-section {
        padding: 0px 10px 0;
    }

    /*packages*/
    .yx-packages .yx-dropdown-inner > .row label, .yx-catalog .yx-dropdown-inner > .row label {
        max-height: 20px;
        height: 20px;
        overflow-y: hidden;
    }
    /*notifications*/
    .switch.large label:after {
        height: 1rem;
        width: 1rem;
    }

    .switch.large input:checked + label:after {
        left: 1.75rem;
    }

    .switch.round label {
        border-radius: 1rem;
    }

    .switch.large label {
        height: 1.5rem;
        width: 3rem;
    }
}


/* Desktops ----------- */

@media only screen and (min-width: 1600px) {
    p {
        font-size: 1em;
    }

    h5 {
        font-size: 1.115rem;
    }

    .card-section {
        padding: 25px 20px 0;
    }

    .yx-form-credit > div:nth-child(1) {
        margin-left: 0px;
    }
}

@media only screen and (min-width: 96.750em) {
    .xlarge-block-grid-1 > li {
        list-style: none;
        width: 100%;
    }

        .xlarge-block-grid-1 > li:nth-of-type(1n) {
            clear: none;
        }

        .xlarge-block-grid-1 > li:nth-of-type(1n+1) {
            clear: both;
        }

    .xlarge-block-grid-2 > li {
        list-style: none;
        width: 50%;
    }

        .xlarge-block-grid-2 > li:nth-of-type(1n) {
            clear: none;
        }

        .xlarge-block-grid-2 > li:nth-of-type(2n+1) {
            clear: both;
        }

    .xlarge-block-grid-3 > li {
        list-style: none;
        width: 33.33333%;
    }

        .xlarge-block-grid-3 > li:nth-of-type(1n) {
            clear: none;
        }

        .xlarge-block-grid-3 > li:nth-of-type(3n+1) {
            clear: both;
        }

    .xlarge-block-grid-4 > li {
        list-style: none;
        width: 25%;
    }

        .xlarge-block-grid-4 > li:nth-of-type(1n) {
            clear: none;
        }

        .xlarge-block-grid-4 > li:nth-of-type(4n+1) {
            clear: both;
        }

    .xlarge-block-grid-5 > li {
        list-style: none;
        width: 20%;
    }

        .xlarge-block-grid-5 > li:nth-of-type(1n) {
            clear: none;
        }

        .xlarge-block-grid-5 > li:nth-of-type(5n+1) {
            clear: both;
        }

    .xlarge-block-grid-6 > li {
        list-style: none;
        width: 16.66667%;
    }

        .xlarge-block-grid-6 > li:nth-of-type(1n) {
            clear: none;
        }

        .xlarge-block-grid-6 > li:nth-of-type(6n+1) {
            clear: both;
        }

    .xlarge-block-grid-7 > li {
        list-style: none;
        width: 14.28571%;
    }

        .xlarge-block-grid-7 > li:nth-of-type(1n) {
            clear: none;
        }

        .xlarge-block-grid-7 > li:nth-of-type(7n+1) {
            clear: both;
        }

    .xlarge-block-grid-8 > li {
        list-style: none;
        width: 12.5%;
    }

        .xlarge-block-grid-8 > li:nth-of-type(1n) {
            clear: none;
        }

        .xlarge-block-grid-8 > li:nth-of-type(8n+1) {
            clear: both;
        }

    .xlarge-block-grid-9 > li {
        list-style: none;
        width: 11.11111%;
    }

        .xlarge-block-grid-9 > li:nth-of-type(1n) {
            clear: none;
        }

        .xlarge-block-grid-9 > li:nth-of-type(9n+1) {
            clear: both;
        }

    .xlarge-block-grid-10 > li {
        list-style: none;
        width: 10%;
    }

        .xlarge-block-grid-10 > li:nth-of-type(1n) {
            clear: none;
        }

        .xlarge-block-grid-10 > li:nth-of-type(10n+1) {
            clear: both;
        }

    .xlarge-block-grid-11 > li {
        list-style: none;
        width: 9.09091%;
    }

        .xlarge-block-grid-11 > li:nth-of-type(1n) {
            clear: none;
        }

        .xlarge-block-grid-11 > li:nth-of-type(11n+1) {
            clear: both;
        }

    .xlarge-block-grid-12 > li {
        list-style: none;
        width: 8.33333%;
    }

        .xlarge-block-grid-12 > li:nth-of-type(1n) {
            clear: none;
        }

        .xlarge-block-grid-12 > li:nth-of-type(12n+1) {
            clear: both;
        }
}

@media only screen and (min-width: 1024px) and (max-width: 1170px) {
    .size2-block-grid-1 > li {
        list-style: none;
        width: 100%;
    }

        .size2-block-grid-1 > li:nth-of-type(1n) {
            clear: none;
        }

        .size2-block-grid-1 > li:nth-of-type(1n+1) {
            clear: both;
        }

    .size2-block-grid-2 > li {
        list-style: none;
        width: 50%;
    }

        .size2-block-grid-2 > li:nth-of-type(1n) {
            clear: none;
        }

        .size2-block-grid-2 > li:nth-of-type(2n+1) {
            clear: both;
        }

    .size2-block-grid-3 > li {
        list-style: none;
        width: 33.33333%;
    }

        .size2-block-grid-3 > li:nth-of-type(1n) {
            clear: none;
        }

        .size2-block-grid-3 > li:nth-of-type(3n+1) {
            clear: both;
        }

    .size2-block-grid-4 > li {
        list-style: none;
        width: 25%;
    }

        .size2-block-grid-4 > li:nth-of-type(1n) {
            clear: none;
        }

        .size2-block-grid-4 > li:nth-of-type(4n+1) {
            clear: both;
        }

    .size2-block-grid-5 > li {
        list-style: none;
        width: 20%;
    }

        .size2-block-grid-5 > li:nth-of-type(1n) {
            clear: none;
        }

        .size2-block-grid-5 > li:nth-of-type(5n+1) {
            clear: both;
        }

    .size2-block-grid-6 > li {
        list-style: none;
        width: 16.66667%;
    }

        .size2-block-grid-6 > li:nth-of-type(1n) {
            clear: none;
        }

        .size2-block-grid-6 > li:nth-of-type(6n+1) {
            clear: both;
        }

    .size2-block-grid-7 > li {
        list-style: none;
        width: 14.28571%;
    }

        .size2-block-grid-7 > li:nth-of-type(1n) {
            clear: none;
        }

        .size2-block-grid-7 > li:nth-of-type(7n+1) {
            clear: both;
        }

    .size2-block-grid-8 > li {
        list-style: none;
        width: 12.5%;
    }

        .size2-block-grid-8 > li:nth-of-type(1n) {
            clear: none;
        }

        .size2-block-grid-8 > li:nth-of-type(8n+1) {
            clear: both;
        }

    .size2-block-grid-9 > li {
        list-style: none;
        width: 11.11111%;
    }

        .size2-block-grid-9 > li:nth-of-type(1n) {
            clear: none;
        }

        .size2-block-grid-9 > li:nth-of-type(9n+1) {
            clear: both;
        }

    .size2-block-grid-10 > li {
        list-style: none;
        width: 10%;
    }

        .size2-block-grid-10 > li:nth-of-type(1n) {
            clear: none;
        }

        .size2-block-grid-10 > li:nth-of-type(10n+1) {
            clear: both;
        }

    .size2-block-grid-11 > li {
        list-style: none;
        width: 9.09091%;
    }

        .size2-block-grid-11 > li:nth-of-type(1n) {
            clear: none;
        }

        .size2-block-grid-11 > li:nth-of-type(11n+1) {
            clear: both;
        }

    .size2-block-grid-12 > li {
        list-style: none;
        width: 8.33333%;
    }

        .size2-block-grid-12 > li:nth-of-type(1n) {
            clear: none;
        }

        .size2-block-grid-12 > li:nth-of-type(12n+1) {
            clear: both;
        }
}


@media only screen and (max-width: 1024px) {
    .yx-dropdown-inner {
        top: -992px;
        width: 95%;
    }

        .yx-dropdown-inner.yx-slide-down {
            top: 87px;
            width: calc(100vw - 83px);
            margin-left: -17px;
            -webkit-transition: top .5s;
            transition: top .5s;
            max-height: 790px;
            height: 790px;
        }

    .abcd.yx-slide-down {
        position: absolute;
        top: 1010px;
        transition: top .5s ease;
    }

    .yx-dropdown > .yx-btn-slidedown.yx-slide-down {
        top: 877px;
    }

    .off-canvas-content {
        padding-left: 290px;
    }

    .hideCardTile {
        display: block !important;
    }

    .yx-table-view {
        display: none;
    }

    .dataTables_info,
    .dataTables_paginate {
        display: none;
    }

    /* Users page: keep table visible and scrollable on mobile */
    #firm-user-container .yx-table-view {
        display: block !important;
    }

    #firm-user-container .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #firm-user-container .dataTables_info,
    #firm-user-container .dataTables_paginate {
        display: block;
    }

    .yx-main-options {
        margin-bottom: 5px;
    }

    .yx-main-options::after {
        content: '';
        display: table;
        clear: both;
    }

    .yx-option-content {
        position: relative;
        right: auto;
        top: auto;
        display: block;
    }

    .yx-option-content .menu li {
        flex-shrink: 0;
    }

    .yx-option-content .menu li:last-child {
        margin-left: auto;
    }

    .yx-main-options .dt-buttons {
        display: inline-block;
        vertical-align: middle;
    }

    .yx-main-options .dt-buttons .dt-button {
        margin-bottom: 0;
    }

    .dataTables_filter {
        text-align: center;
        margin-bottom: 10px;
    }

    .dataTables_filter label {
        width: 100%;
        margin-bottom: 1rem;
    }

    .dataTables_filter input {
        width: 100%;
        max-width: 250px;
    }

    .orderhistory .yx-table-view, .yx-notifications .yx-table-view, .yx-dashboard2 .yx-table-view, .yx-dashboard .yx-table-view {
        display: inline-table;
        width: 100%;
        margin-left: 0px;
    }

    .off-canvas-content.yx-slide-left {
        padding-right: 0;
    }

    .off-canvas-content {
        padding-right: 0;
    }

    .orderhistory .collapsible > li > .collapsible-body > .row > .columns:last-child {
        padding-left: 0px;
        border-left: none;
        margin-top: 20px;
    }

    .yx-dashboard2 #card-container .dropdown.button, .yx-dashboard2 #card-container button.dropdown {
        padding-right: 30px;
        margin-top: 30px;
        z-index: 9;
    }

    .yx-toggle-view {
        display: none !important;
    }


    .yx-actfeed .yx-credits {
        margin-right: 35px;
    }

    .yx-option-content ul {
        display: block;
        width: 80%;
    }

    .small-12.yx-fix-width {
        width: 100%;
    }

    .abcd {
        padding-left: 0px;
        padding-right: 20px;
        width: calc(100vw - 80px);
    }

    .yx-slide-left .abcd {
        padding-left: 0px;
        padding-right: 20px;
        width: calc(100vw - 80px);
    }
}

@media only screen and (max-width: 1280px) {
    .hideColumnCertificate {
        display: none;
    }
}

@media only screen and (min-width: 1280px) {
    .hideColumnCertificate {
        display: block;
    }
}

@media (min-width: 300px) and (max-width: 768px) {
    table thead tr th, table tr td p, table tr td a {
        font-size: 0.8rem !important;
    }

    .yx-table-view .button.pack-button {
        min-width: 160px;
        padding: 10px;
    }

    .yx-dropdown-inner {
        top: -992px;
        width: 95%;
    }

    .yx-container-address > div > div:first-child {
        display: block;
    }

    .yx-address .collapsible {
        padding: 0px 35px 0px 0px;
    }

    .notify {
        left: 10px !important;
    }

    .yx-content-header {
        position: relative !important;
    }

    .yx-float-right {
        position: relative;
        display: block;
        width: 215px;
        right: 0px;
        top: 0px;
        margin: 0 auto;
    }

    .yx-dropdown {
        margin-top: 0px;
    }

    .abcd {
        top: 320px;
    }

    .yx-catalog .abcd {
        top: 225px;
    }

    .abcd.yx-slide-down {
        top: 1120px !important;
    }

    .yx-catalog .abcd.yx-slide-down {
        top: 1010px !important;
    }

    .yx-dropdown > .yx-btn-slidedown.yx-slide-down {
        top: 835px !important;
    }

    .yx-main-options {
        height: auto;
        margin-bottom: 10px;
    }

    .yx-credit-left {
        font-size: 1.72rem;
    }

    .yx-toggle-view {
        display: none;
    }

    .yx-container-address.row {
        width: calc(100vw - 80px);
        margin-left: -20px;
    }

    .yx-container-address > div > .yx-custom {
        margin-left: 0px;
        margin-top: 10px;
        width: 100%;
    }

    .yx-address .yx-input-field label {
        left: 20px;
    }

    .yx-dropdown > .yx-filter {
        top: 20px;
    }

    .fb {
        width: calc(100vw - 60px);
        margin-left: -20px;
    }

    .yx-pk-content {
        margin-bottom: 40px;
        background: #ffffff;
    }

    .yx-dropdown > .yx-btn-slidedown {
        top: 40px;
    }

    .yx-dropdown-inner.yx-slide-down {
        top: 48px !important;
    }


    .card-section h6 {
        font-size: 0.6rem;
    }



    .yx-address .yx-input-field input[type=text], .yx-address .yx-input-field input[type=password] {
        margin: 0;
        width: calc(100% - 2.2rem) !important;
        padding-left: 2rem;
    }

    .yx-address .yx-input-field input[type=text], .yx-address .yx-input-field input[type=password] {
        margin: 0;
        width: calc(100vw - 100px) !important;
        padding-left: 0;
    }

    .yx-address .yx-input-field .yx-prefix {
        top: -5px;
    }



    .yx-pk-lbltext {
        margin-bottom: 20px;
    }

    /*packages*/
    /*certificates*/
    .collapsible-header {
        font-size: 0.8rem;
    }

    .f-dropdown {
        max-width: 200px !important;
        width: 200px !important;
    }
    /* Payment */
    .yx-creditcard {
        padding: 27px !important;
        max-width: 276px;
    }

        .yx-creditcard .yx-creditcard-inf > p:nth-child(1) {
            margin-right: 10px !important;
        }

        .yx-creditcard .yx-creditcard-inf > p:nth-child(2),
        .yx-creditcard .yx-creditcard-inf > p:nth-child(3) {
            margin-right: 20px !important;
            display: inline;
            width: 19px;
        }

    .yx-card-expiration {
        display: block;
    }

        .yx-card-expiration .yx-custom {
            padding: 0px 10px;
            width: 7em;
            display: inline-block;
        }

    .collapsible-header {
        display: block !important;
    }
    /* === Payment End=== */
    /* OrderHistory  */
    .orderhistory .collapsible > li > .collapsible-body > .row > .columns:last-child {
        padding-left: 0px !important;
        border-left-width: 0px !important;
        border-top: 1px solid #878787;
        margin-top: 20px;
    }

        .orderhistory .collapsible > li > .collapsible-body > .row > .columns:last-child > h4, .columns:last-child > table, .columns:last-child > p {
            margin-left: 0px !important;
        }

    .collapsible-body {
        padding: 1em;
    }

    h4 {
        font-size: 1rem;
    }

    .orderhistory td .yx-credits, .yx-input-field input[type=text], .yx-input-field input[type=password], .yx-input-field label, button, .button, h5, .yx-select-checkbox-label, ul, ol, dl, .yx-custom .yx-label-title, .yx-address select.yx-noradio {
        font-size: 0.8rem;
    }

    .orderhistory .yx-main-options {
        margin-top: 30px;
    }
    /*profile*/
    [data-abide] .error small.error, [data-abide] .error span.error, [data-abide] span.error, [data-abide] small.error {
        margin-left: -8px;
        margin-top: -110px !important;
        position: relative;
        z-index: 9;
        width: 290px;
        padding: 0.5rem 2.3rem !important;
    }

    .yx-alert-warning {
        padding-left: 25px;
        bottom: 0px;
        left: 75px;
        background-color: #fff;
    }
    /*about*/
    .yx-select > span {
        padding-right: 0em;
        font-size: 0.8rem;
    }

    .yx-custom .yx-label-radio, .yx-select span {
        font-size: 0.8rem;
    }

    .yx-about .collapsible > li > .collapsible-body > .row > .columns:last-child {
        padding-left: 14px;
    }

    div.yx-select {
        width: 100%;
    }

    .yx-select-checkbox-label span::after {
        right: 0;
    }

    .yx-custom .yx-input-radio {
        top: 31px;
        right: -17px;
    }

    .yx-select > span::after {
        right: 0em;
    }

    .columns.no-pad-left {
        padding-left: 0;
    }

    .flex {
        padding-top: 0;
    }

    .yx-about .yx-btn-link-orange {
        margin: 25px auto 46px auto !important;
    }

    .yx-about .collapsible-body {
        padding-bottom: 30px;
    }

    .yx-btn-link-orange {
        max-width: fit-content;
    }
    /*dashboard*/
    .yx-card-table {
        max-height: 189px;
    }

    /*addrress*/
    .yx-address select.yx-noradio {
        width: calc(100vw - 100px) !important;
        margin-top: 0.5rem;
        margin-left: -32px;
    }

    .yx-address #modalAlert {
        max-width: 100%;
    }

    .yx-dashboard-content {
        overflow-x: scroll;
    }

    .yx-charts {
        margin-left: calc(50% - 196px);
    }

    .jplist-panel {
        right: 10px !important;
    }

    .yx-pk-lblnumber {
        font-size: 1.2rem;
    }

    .yx-pk-lbl {
        right: 3px;
        max-width: 70px;
        padding: 5px 10px;
    }

    .sideItem a span, span.side-hide, .jplist-label {
        font-size: .8rem;
    }

    .side-title {
        font-size: 1rem;
    }

    .yx-catalog .yx-main-options {
        margin-top: 50px;
    }

        .yx-catalog .yx-main-options.yx-slide-down {
            margin-top: 35px;
        }

    .yx-catalog .yx-dropdown > .yx-btn-slidedown.yx-slide-down {
        top: 788px;
    }

    .orderhistory #card-container {
        width: calc(100vw - 59px);
        margin-left: -21px;
    }

    .orderhistory .collapsible {
        padding-right: 30px;
    }

    .reveal-modal.small {
        width: 100%;
    }

    .yx-table-noti {
        margin-bottom: 200px !important;
        width: calc(100vw - 95px) !important;
    }

    .reveal-modal {
        min-height: auto;
    }

    .progress.round {
        margin-top: 25px;
    }

    .yx-dashboard2 .card-image .yx-table-view {
        display: none !important;
    }

    table.yx-table-view {
        width: calc(100% - 20px);
    }

    .yx-dashboard2 .card > div:nth-last-of-type(n+4) {
        height: auto;
    }

    .yx-dashboard2 .yx-btn-link-orange {
        position: initial;
        right: 0px;
        margin-top: 0;
        bottom: 0px;
    }

    .yx-about .collapsible {
        width: calc(100vw - 110px);
        margin-left: 0px;
        padding-right: 0;
    }

    .yx-about .show-for-medium-up {
        display: block !important;
    }

    .yx-about .yx-input-field input[type=text], .yx-about .yx-input-field input[type=password], .yx-about select {
        margin: 0;
        width: 100% !important;
        padding-left: 0;
    }

    .yx-about input[type="checkbox"] + label, input[type="radio"] + label {
        margin-left: 0;
    }

    .sideItem a {
        padding: 11px 0 !important;
    }

    li.sideItem {
        height: 50px;
    }

    .yx-contact-us {
        bottom: 85px;
        padding-top: 5px;
    }

    .side-title {
        line-height: 1;
        margin-top: 0;
    }

    .yx-dashboard2 ul#card-list > li:nth-last-of-type(-n+2), .yx-dashboard-content {
        display: none;
    }

    .yx-dashboard2 .yx-change-link, .yx-dashboard .yx-change-link {
        display: inline-block;
    }

        .yx-dashboard2 .yx-change-link h5, .yx-dashboard .yx-change-link h5 {
            display: inline-block;
            float: left;
            margin-right: 10px;
        }

    .yx-dashboard2 .yx-btn-link-blue, .yx-dashboard .yx-btn-link-blue {
        padding: 20px 5px;
        ;
    }

        .yx-dashboard2 .yx-btn-link-blue:hover, .yx-dashboard .yx-btn-link-blue:hover {
            background-color: #1e3e4e;
            color: #fff !important;
        }

    .yx-dashboard2 ul#card-list > li:nth-child(3) a {
        line-height: 4.5;
    }

    .yx-payment .yx-form-credit {
        width: calc(100vw - 75px);
        margin-left: -20px;
    }

    .yx-pagination-container {
        left: 50px;
        width: calc(100% - 40px);
    }

    .yx-address select.yx-noradio {
        padding-left: 21px;
    }

    .yx-packages .yx-content-header {
        padding: 20px 0;
        height: 129px;
    }

    .yx-catalog .yx-search-div {
        margin-bottom: 30px;
    }

    .yx-catalog .yx-content-header {
        height: 60px;
        left: -10px;
    }

    .jplist-pagination.whithout-arrow .jplist-pagingmid {
        width: 47px !important;
    }

    .pagination-ctrl-title {
        margin-top: 17px !important;
    }

    .jplist-pagination.whithout-arrow .jplist-pagingmid .jplist-pagesbox {
        width: 0 !important;
    }

    .jplist-label {
        padding: 0 !important;
        margin: 10px 0px 0 0 !important;
    }

    .yx-notifications table.yx-table-view thead tr th, .yx-notifications table tfoot tr th, .yx-notifications table.yx-table-view tfoot tr td, .yx-notifications table.yx-table-view tbody tr th, .yx-notifications table.yx-table-view tbody tr td, .yx-notifications table.yx-table-view tr td {
        padding: 5px 2px;
    }

    .yx-dashboard2 .card-packages .button.pack-button {
        padding: 5px;
    }

    .yx-catalog .yx-table-modal td, .yx-catalog .yx-table-modal th {
        padding: 20px 0;
    }

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

@media only screen and (max-width: 640px) {
    .yx-search-div {
        display: none;
    }

        .yx-search-div ul {
            display: flex;
            margin-top: 20px;
        }

            .yx-search-div ul li {
                margin-left: 10px;
            }

        .yx-search-div input {
            max-width: 190px;
            margin-right: 0;
            width: 190px;
            margin-top: -5px;
            font-size: 0.75rem;
            height: 2rem;
        }

    .top-bar-section ul.yx-topbar-menu {
        display: none;
    }

    .card-section h6 span.yx-time {
        display: none;
    }

    .chat-container {
        left: 180px;
        max-width: 330px;
    }

    .off-canvas-content {
        padding-left: 62px;
    }

    #offCanvasLeftOverlap {
        width: 53px;
    }

        #offCanvasLeftOverlap .yx-open-side {
            left: 53px;
        }

        #offCanvasLeftOverlap .sideItem a span {
            display: none;
        }

        #offCanvasLeftOverlap.yx-slide-left .sideItem a span {
            display: block;
        }

    .top-bar {
        padding-top: 5px;
    }

    .menu-text.logo {
        padding-bottom: 8px;
    }

    .action-WebinarLobby .columns .yx-input-field label {
        margin: 0px;
        left: 0px;
        padding: 10px 0px;     
        width: 85%;    
    }

    .resizable-with-bottom-margin {
        margin-bottom: 1rem !important;
    }

    .resizable-with-top-margin {
        margin-top: 3rem !important;
    }

    #new-user-email-modal,
    #webcastModal,
    #designations-modal-container {
        width: 90% !important;
    }
}

@media (max-width: 460px) {
    .yx-search-div ul li:nth-child(2) {
        display: none;
    }

    .resizable-with-bottom-margin {
        margin-bottom: 2rem !important;
    }

    .resizable-with-top-margin {
        margin-top: 3rem !important;
    }

    #new-user-email-modal,
    #webcastModal,
    #designations-modal-container,
    .exam-button {
        width: 90% !important;
    }
}

@media (max-width: 420px) {
    .yx-search-div input {
        width: 100px !important;
    }

    .resizable-with-bottom-margin {
        margin-bottom: 2rem !important;
    }
    
    .resizable-with-top-margin {
        margin-top: 3rem !important;
    }

    #new-user-email-modal,
    #webcastModal,
    #designations-modal-container,
    .exam-button {
        width: 100% !important;
    }
}

@media only screen and (max-width: 350px) {
    .card-footer i {
        display: none;
    }

    p, .yx-dropdown-inner > .row label, td .yx-credits {
        font-size: .7rem !important;
    }

    .resizable-with-bottom-margin {
        margin-bottom: 2rem !important;
    }

    .resizable-with-top-margin {
        margin-top: 3rem !important;
    }

    #new-user-email-modal,
    #webcastModal,
    #designations-modal-container,
    .exam-button {
        width: 100% !important;
    }

    .column, .columns {
        padding-left: 0 !important;
    }
}