﻿@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url(glyphicons-bootstrap-3.css); /* added to use BS 3 icons */

body {
    font-family: "Fira Sans", sans-serif;
}
:root {
    --themeBlue: #0070c0;
    --themeBlueTwo: #337ab7;
    --themeGreen: #8BBA34;
    --themeGreenLight: #92d050;
    --themeOrange: #fab719;
    --themeblack: #000;
    --themeGray: #BFBFBF;
    --themeRed: #ff0000;
    --themeNavyBlue: #112b67;
    --grayOne: #7f7f7f;
    --grayTwo: #bfbfbf;
    --grayThree: #d9d9d9;
    --grayFour: #f2f2f2;
    --grayFive: #383838;
    --graySix: #4C4D4F;
    --graySeven: #ccc;
    --grayEight: #e7e7e7;
    --grayNine: #ddd;
    --grayTen: #4C4C4F;
    --grayEleven: #443635;
    --graytwelve: #cecece;
    --FontBig-1-1: calc(1em * 1.1);
    --FontBig-1-2: calc(1em * 1.2);
    --FontBig-1-3: calc(1em * 1.3);
    --FontBig-1-4: calc(1em * 1.4);
    --FontBig-1-5: calc(1em * 1.5);
    --FontBig-1-6: calc(1em * 1.6);
    --FontBig-1-7: calc(1em * 1.7);
    --FontBig-1-8: calc(1em * 1.8);
    --FontBig-1-9: calc(1em * 1.9);
    --FontBig-2: calc(1em * 2);
}

select option:disabled {
    color: rgb(159, 159, 159);
}

.FontBig-1-1 {
    font-size: var(--FontBig-1-1);
}

.FontBig-1-2 {
    font-size: var(--FontBig-1-2);
}

.FontBig-1-3 {
    font-size: var(--FontBig-1-3);
}

.FontBig-1-4 {
    font-size: var(--FontBig-1-4);
}

.FontBig-1-5 {
    font-size: var(--FontBig-1-5);
}

.FontBig-1-6 {
    font-size: var(--FontBig-1-6);
}

.FontBig-1-7 {
    font-size: var(--FontBig-1-7);
}

.FontBig-1-8 {
    font-size: var(--FontBig-1-8);
}

.FontBig-1-9 {
    font-size: var(--FontBig-1-9);
}

.FontBig-2 {font-size: var(--FontBig-2);}

.invert-100 {filter:invert(100%);}

.invert-90 {filter: invert(90%);}

.invert-80 {filter: invert(80%);}

.invert-70 {filter: invert(70%);}

.invert-60 {filter: invert(60%);}

.invert-50 {filter: invert(50%);}

.invert-40 {filter: invert(40%);}

.invert-30 {filter: invert(30%);}

.invert-20 {filter: invert(20%);}

.invert-10 {filter: invert(10%);}

.maxWidth100Percent {
    max-width: 100% !important;
}

.line {
    border: 0;
    border-bottom: 1px solid var(--themeGray);
    padding: 0;
    margin: 10px 0;
    outline: none;
}

.hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--graySeven);
    margin: 1em 0;
    padding: 0;
}

.cursorPointer {
    cursor: pointer !important;
}

.cursorDefault {
    cursor: auto !important;
}

.cursorNotAllowed {
    cursor: not-allowed !important;
}

.cursorEventNone {
    pointer-events: none !important;
}

.disabled-ui {
    opacity: 0.75;
    filter: alpha(opacity=75);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.linkText {
    display: inline-block;
    color: var(--themeBlue);
    text-decoration: none;
    vertical-align: sub;
    cursor: pointer;
}

    .linkText:hover,
    .linkText:focus,
    .linkText:active {
        color: var(--themeBlue);
        text-decoration: none;
        outline: none;
    }

.btnLink {
    display: inline-flex;
    background: #443634;
    border: 2px solid #443634;
    height: 40px;
    border-radius: 10px;
    color: #fff !important;
    font-family: Fira Sans;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 134.1%;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    margin: 10px 0 10px;
    cursor: pointer;
}

    .btnLink,
    .btnLink:hover,
    .btnLink:focus {
        color: #fff !important;
        text-decoration: none !important;
        font-weight: 400 !important;
    }

        .btnLink .glyphicon {
            margin-right: 20px;
            font-size: 25px;
        }

.btn--UI {
    min-width: 90px;
    height: 45px;
    border-radius: 10px;
    font-family: Fira Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 134.1%;
}

.btn--default, .btn--default:focus, .btn--default:hover,
.btn--default--solid, .btn--default--solid:focus, .btn--default--solid:hover,
.btn--default--green, .btn--default--green:focus, .btn--default--green:hover,
.btn--graySix, .btn--graySix:focus, .btn--graySix:hover {
    border-style: solid;
    border-width: 2px;
}

    .btn--default, .btn--default:focus, .btn--default:hover {
        border-color: var(--themeGray);
        background: #fff;
        color: var(--themeGray);
    }

    .btn--default--solid, .btn--default--solid:focus, .btn--default--solid:hover {
        border-color: var(--themeGray);
        background: var(--themeGray);
        color: #fff;
    }

    .btn--default--green, .btn--default--green:focus, .btn--default--green:hover {
        border-color: #EEA710;
        background: #fff;
        color: #0E1A3B;
    }

.btn--green--solid, .btn--green--solid:focus, .btn--green--solid:hover {
    border-color: #EEA710;
    background: #EEA710;
    color: #0E1A3B;
}

.btn--primary, .btn--primary:focus, .btn--primary:hover {
    border-color: var(--themeGray);
    background: var(--themeGray);
    color: #fff;
}

.btn--graySix--solid, .btn--graySix--solid:focus, .btn--graySix--solid:hover {
    border-color: var(--graySix);
    background: var(--graySix);
    color: #fff;
}

.btn--graySix, .btn--graySix:focus, .btn--graySix:hover {
    border-color: var(--graySix);
    background: #fff;
    color: var(--graySix);
}

/*header*/
.hedaerNavigation {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    height: 65px;
    background-color: #132D74;
    align-items: center;
}

.hedaerNavigation__logo {
    width: 100px;
    justify-content: center;
    display: flex;
}

    .hedaerNavigation__logo img {
        height: calc(65px - 10px);
        width: auto;
    }

.hedaerNavigation__user__items {
    display: flex;
    align-items: center;
}

.hedaerNavigation * {
    color: #fff;
}

.hedaerNavigation__icon {
    flex-grow: 2;
}

.hedaerNavigation > li {
    padding: 0 15px;
}

    .hedaerNavigation > li + li {
        padding-left: 0;
    }

.hedaerNavigation__title h2 {
    font-family: 'Roboto', Tahoma, Verdana, sans-serif;
    font-weight: bold;
    font-size: 30px;
    line-height: 47px;
    margin: 0;
}

.hedaerNavigation__user__items__profile__initial {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
border-radius: 50%;
background: #D9D9D9;
font-family: Fira Sans;
font-style: normal;
font-weight: normal;
font-size: 22px;
color: #7F7F7F;
text-align: center;
line-height: 190%;
}

.hedaerNavigation__user__items__profile {
    position: relative;
    width: 40px;
    height: 40px;
    margin-right: 15px;
}

.hedaerNavigation__user__items__profile__picture {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    border-radius: 50%;
    background: #D9D9D9;
    font-family: Fira Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    color: #7F7F7F;
    text-align: center;
    line-height: 190%;
    overflow: hidden;
}

    .hedaerNavigation__user__items__profile__picture img {
        position: relative;
        height: auto;
        width: calc(40px * 1.15);
    }

.hedaerNavigation__user__items__name {
    position: relative;
    padding-right: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

    .hedaerNavigation__user__items__name i.glyphicons {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        height: 12px;
        margin: auto;
        font-size: .9em;
        line-height: 12px;
    }

    .hedaerNavigation__user__items__name:hover, .hedaerNavigation__user__items__name:focus {
        color: #fff;
        text-decoration: none;
    }

    .hedaerNavigation__user__items__name.dropdown-toggle:after {
        display: none;
    }

.hedaerNavigation__user__items .dropdown-menu {
    border-radius: 0;
    border: 1px solid #BFBFBF;
    box-shadow: 4px 4px 4px rgb(0 0 0 / 25%);
    padding: 5px 0;
    left: unset !important;
    top: 52px !important;
    right: 2px;
    transform: unset !important;
}

    .hedaerNavigation__user__items .dropdown-menu .dropdown-item {
        font-family: 'Roboto', Tahoma, Verdana, sans-serif;
        font-style: normal;
        font-weight: normal !important;
        font-size: 16px;
        line-height: 38px !important;
        color: #000000;
        padding: 0 20px 0 50px !important;
        position: relative;
    }

        .hedaerNavigation__user__items .dropdown-menu .dropdown-item * {
            color: #000;
        }

        .hedaerNavigation__user__items .dropdown-menu .dropdown-item i.glyphicons {
            font-size: 20px;
            position: absolute;
            left: 15px;
            top: 0;
            bottom: 0;
            margin: auto;
            line-height: inherit;
        }

        .hedaerNavigation__user__items .dropdown-menu .dropdown-item:hover, .hedaerNavigation__user__items .dropdown-menu .dropdown-item:focus {
            background: transparent;
        }
/*header end*/


.form-control.form-control-UI {
    height: 45px;
    padding: 5px;
    border-radius: 4px;
    box-shadow: none;
    font-size: 18px;
    line-height: 120%;
    font-weight: 400;
    border: 1px solid var(--graySeven);
}

.table--UI thead th {
    border-top: 0;
}

.table--UI thead th, .table--UI tbody td {
    padding: .5rem;
    border-top: 0;
    vertical-align: middle;
    font-size: inherit;
    display: inline-grid;
    border-color: var(--graySeven);
}

.table--UI--tbodyScroll thead tr th > span.textEllipsis {
    position: relative;
    display: inline-grid;
    grid-template-columns: auto 15px;
    grid-template-rows: auto;
    column-gap: 10px;
    align-items: baseline;
    margin: auto auto 0 0;
}

    .table--UI--tbodyScroll thead tr th > span.textEllipsis > span,
    .table--UI--tbodyScroll tbody tr td > span.textEllipsis {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

.table--UI .linkText {
    color: var(--themeGreenLight);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    margin: auto;
}

.table--UI .table--body .linkText--disabled {
    color: var(--themeGray);
}

.table--UI--tbodyScroll tbody tr td.table--UI__action, .table--UI--tbodyScroll thead tr th.table--UI__action {
    width: 100px;
    max-width: 100px;
}

.table--UI__action > ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: auto 0;
    align-items: center;
    justify-content: center;
    height: 100%;
}

    .table--UI__action > ul > li + li {
        padding-left: 15px;
    }

    .table--UI__action > ul > li i.glyphicons, .table--UI__action > ul > li i.glyphicon {
        cursor: pointer;
    }

    .table--UI__action > ul > li {
        display: flex;
        align-items: center;
    }

.table--UI__sort {
    vertical-align: initial;
    font-size: .75em;
    color: var(--grayOne);
    cursor: pointer;
}

    .table--UI__sort.table--UI__sort--on:before {
        content: "\e253";
    }

.table--UI__action {
    min-width: 100px;
    max-width: 100px;
}

/*table scroll*/
.table--UI--tbodyScroll thead tr, .table--UI--tbodyScroll tbody tr {
    display: flex;
}

.table--UI--tbodyScroll tbody {
    max-height: calc(100vh - 300px);
    overflow: auto;
}

.table--UI--tbodyScroll {
    display: flex;
    flex-direction: column;
    min-width: 715px;
}

    .table--UI--tbodyScroll thead tr th, .table--UI--tbodyScroll tbody tr td {
        width: 100%;
    }

        .table--UI--tbodyScroll thead tr th.table--UI__action--scrollFix {
            margin-right: 20px;
        }

/*table scroll end */

/* page layout */
:root {
    --leftPanelWidth: 275px;
    --headerHeight: 65px;
    --padding-margin-15px: 15px;
}

.width-100-Percentage, .pageLayout__leftPanel .btn {
    width: 100%;
}

.pageLayout__leftPanel .btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pageLayout, .pageLayout > .pageLayout__rightPanel {
    display: flex;
    flex-grow: 1;
}

    .pageLayout > .pageLayout__rightPanel {
        flex-direction: column;
        padding-bottom: 0;
        padding-top: 0;
    }

    .pageLayout > .pageLayout__leftPanel {
        width: var(--leftPanelWidth);
        min-width: var(--leftPanelWidth);
        max-width: var(--leftPanelWidth);
        border-right: 1px var(--graySeven) solid;
    }

    .pageLayout > div {
        padding: var(--padding-margin-15px);
        height: calc(100vh - var(--headerHeight));
        overflow: auto;
    }

.pageLayout__rightPanel__searchBlock, .pageLayout__rightPanel__title {
    height: 80px;
    min-height: 80px;
}

.pageLayout__rightPanel__title {
    display: flex;
    align-items: center;
    border-bottom: 1px var(--grayThree) solid;
    justify-content: space-between;
}

.pageLayout__rightPanel__cover__header {
    font-size: 1.25em;
    color: var(--grayTwo);
}

.pageLayout__rightPanel__title h3 {
    margin: auto 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    flex-grow: 2;
}

.pageLayout__rightPanel__cover {
    margin-left: -15px;
    margin-right: -15px;
    padding: var(--padding-margin-15px);
}

.buttonGroup:not(.buttonGroup--vertical) .btn + * {
    margin-left: var(--padding-margin-15px);
}

.buttonGroup.buttonGroup--vertical .btn {
    margin-bottom: var(--padding-margin-15px);
}

.buttonGroup.buttonGroup--vertical .btn--UI {
    height: 40px;
    line-height: 26px;
    font-size: 16px;
}

.pageLayout__rightPanel__title__nav {
    padding: 0;
    border: 0;
    background: none;
    color: var(--grayTwo);
    margin-right: 10px;
    font-size: 1.25em;
    line-height: normal;
    height: 17px;
    margin-left: -1px;
    width: 18px;
}

.pageLayout__rightPanel__cover p {
    font-size: 1.10em;
}

.pageLayout__rightPanel__title__text {
    font-size: 18px !important;
    margin: auto 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.buttonNavCover {
    display: flex;
    justify-content: flex-end;
}

.buttonNav {
    padding: 0;
    border: 0;
    width: 45px;
    height: 45px;
    border-radius: 4px;
    font-size: 1.4em;
    color: #fff;
    border: 2px solid transparent;
}

    .buttonNav + .buttonNav {
        margin-left: 10px;
    }

    .buttonNav .glyphicons {
        line-height: 45px;
    }

.searchCoursesBox {
    position: relative;
}

    .searchCoursesBox input[type="text"].form-control {
        padding-right: 40px;
    }

.searchCoursesBox__btn {
    position: absolute;
    right: 10px;
    top: 12px;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
    color: var(--grayOne) !important;
    display: inline-block;
}

.modalCustomUI .modal-header {
    background-color: var(--themeNavyBlue) !important;
    color: #fff;
    display: flex;
    padding-right: 130px !important;
    border-bottom: 0;
    border-radius: 0px;
}

.modalCustomUI .modal-content {
    border-radius: 0px;
    border: 0px;
}

    .modalCustomUI .close {
        color: #fff !important;
        opacity: 1 !important;
        position: absolute;
        right: 0px;
        top: 0px;
        margin: 0;
        font-weight: bold !important;
        font-family: system-ui;
        line-height: 0;
        outline: none;
    }

.modalCustomUI .btn {
    min-width: 90px;
    height: 50px;
    border-radius: 10px;
    font-family: Fira Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 134.1%;
}

.modalCustomUI .form-control {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: none;
    height: 45px;
    font-size: 18px;
    line-height: 120%;
    font-weight: 400;
}


.modalCustomUI .form-group .checkbox {
    font-family: Fira Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 134.1%;
    vertical-align: middle;
    margin: 0;
}

.modalCustomUI .form-group .checkbox input[type="checkbox"] {
    width: 15px;
    height: 15px;
    background: #FFFFFF;
    border: 1px solid #BFBFBF;
    border-radius: 0;
    display: inline-block;
    margin: 0 20px 0 0;
    position: relative;
    cursor: pointer;
}

.modalCustomUI .form-group .checkbox label {
    padding: 0;
    margin: 10px 0 5px;
    min-height: unset;
    cursor: auto;
}

.modalCustomUI .form-group input[type="checkbox"]:checked:after {
    content: "";
    position: absolute;
    left: 1px;
    top: 0;
    bottom: 5px;
    margin: auto;
    width: 18px;
    height: 10px;
    border: 4px #7f7f7f solid;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
}

.modalCustomUI .form-group input[type="checkbox"]:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background: white;
    margin: auto;
    bottom: 1px;
    border: 1px #ccc solid;
}

.modalCustomUI .form-group .checkbox > label {
    display: flex;
    align-items: center;
}

/* ActionModal */
.modalCustomUI div.form-control {
    line-height: 35px;
}

.labelBig {
    font-family: Fira Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 134.1%;
    color: #000000;
    margin: 15px 0 5px;
}

.closeButton:before {
    display: inline-block;
    overflow: hidden;
    border-radius: 100%;
}

.checkUICover {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    border: 2px var(--graySeven) solid;
    margin-right: 10px;
    vertical-align: text-top;
}

    .checkUICover input[type="checkbox"] {
        margin: 0;
        width: 16px;
        height: 16px;
        position: relative;
        z-index: 9;
        cursor: pointer;
        opacity: 0
    }

        .checkUICover input[type="checkbox"]:checked + .checkUIBtn:after {
            content: "";
            position: absolute;
            width: 12px;
            height: 7px;
            border: 3px var(--graySeven) solid;
            border-width: 0 0 3px 3px;
            top: 2px;
            left: 1px;
            transform: rotate(-45deg);
        }

.overlayContent, .learningProgramoverlayContent {
    /*display: none;*/
    margin-left: -15px;
    margin-right: -15px;
    background-color: var(--grayFour);
}

    .overlayContent .pageLayout__rightPanel__cover, .learningProgramoverlayContent .pageLayout__rightPanel__cover {
        margin: auto;
        min-height: calc(100vh - 65px);
    }

.imageThumb {
    width: 70px;
    height: 45px;
    border-radius: 4px;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}

    .imageThumb img {
        cursor: pointer;
        border-radius: 4px;
        border: 1px var(--grayTwo) solid;
        width: 100%;
        height: auto;
        margin: auto;
    }

.libraryContentBlock__tabContent textarea.form-control-UI {
    height: 130px;
    min-height: 130px;
    max-height: 130px;
}

.characterCountCover {
}

    .characterCountCover input.form-control-UI {
        padding-bottom: 12px;
    }

.characterCountCover {
    position: relative;
}

    .characterCountCover .characterCount {
        position: absolute;
        right: 14px;
        bottom: -2px;
        font-size: .7em;
        color: var(--grayTwo);
    }

.searchDropdownUI .form-control-UI {
    padding-right: 25px;
    padding-left: 10px;
}

.searchDropdownUI .dropdown-toggle::after {
    position: absolute;
    right: 10px;
    top: 20px;
}

.searchDropdownUI .dropdown-menu {
    width: 100%;
    margin: 0;
    border-radius: 0;
    border: 1px solid #BFBFBF;
    box-shadow: 4px 4px 8px -5px #000000;
}

.searchDropdownUI__list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow: auto;
}

.searchDropdownUI__list > li a {
    display: flex;
    color: var(--grayTen);
    padding: 0 10px;
    height: 35px;
    align-items: center;
    text-decoration: none;
}

.searchDropdownUI__list > li a:hover, .searchDropdownUI__list > li a:focus {
    color: #000;
}

.hidden {
    display: none !important;
}

:disabled {
    cursor: not-allowed;
}

.dropClient {
   width:50%;
} 

.selectedMainCourse {
    background-color: #797a7b;
    color: white;
    border: 2px solid white !important;
}

.bootbox-footer.modal-footer {
    margin-top: 10px;
}

.bg-primary {
    background-color: var(--themeNavyBlue) !important;
}

.btn-default {
    color: #ffffff;
    text-shadow: none;
    background-color: #2e7bff;
    background-image: none;
    border-color: #2e7bff;
}

.modal-header button.close {
    color: #fff !important;
}

.bootbox .modal-dialog .modal-content {
    border-radius: 0;
}

.numberField {
    max-width: 60px;
}

/*------------------------------------------------------------------------*/
/* Mobile First */
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
}
/* Mobile First End */
/*------------------------------------------------------------------------*/
/* Desktop First */
/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
}

/*Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
    .modalCustomUI .modal-dialog {
        display: block;
    }

    .modalCustomUI:before {
        display: inline-block;
        height: unset;
        margin: unset;
        visibility: unset;
        content: unset;
    }
}
/* Medium devices (desktops, 992px and up) */
@media (max-width: 991px) {
    
}

/*Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
}

/*Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
}
/* Desktop First End */



.spinner {
    display: inline-block;
    opacity: 0;
    width: 0;
    -webkit-transition: opacity 0.25s, width 0.25s;
    -moz-transition: opacity 0.25s, width 0.25s;
    -o-transition: opacity 0.25s, width 0.25s;
    transition: opacity 0.25s, width 0.25s;
}

.has-spinner.active {
    cursor: progress;
}

    .has-spinner.active .spinner {
        opacity: 1;
        width: auto; /* This doesn't work, just fix for unkown width elements */
        margin-top: 5px;
    }

        .has-spinner.active .spinner.wait {
            opacity: 1;
            width: 400px; /* This doesn't work, just fix for unknown width elements */
            font-size: 24px;
            padding-top: 120px;
            text-align: center;
        }

.has-spinner.btn-mini.active .spinner {
    width: 10px;
    margin-right: 2px;
}

.has-spinner.btn-small.active .spinner {
    width: 13px;
    margin-right: 4px;
}

.has-spinner.btn.active .spinner {
    width: 16px;
    margin-right: 6px;
}

.has-spinner.btn-large.active .spinner {
    width: 19px;
    margin-right: 8px;
}

.glyphicon-spin {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
