/*visibility tools*/

@-ms-viewport {
    width: device-width;
}

.visible-xs {
    display: none !important;
}

.visible-sm {
    display: none !important;
}

.visible-md {
    display: none !important;
}

.visible-lg {
    display: none !important;
}

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
    display: none !important;
}

@media only screen and (2px <=width <=766px) {
    .visible-xs {
        display: block !important;
    }

    table.visible-xs {
        display: table !important;
    }

    tr.visible-xs {
        display: table-row !important;
    }

    th.visible-xs,
    td.visible-xs {
        display: table-cell !important;
    }
}

@media only screen and (2px <=width <=766px) {
    .visible-xs-block {
        display: block !important;
    }
}

@media only screen and (2px <=width <=766px) {
    .visible-xs-inline {
        display: inline !important;
    }
}

@media only screen and (2px <=width <=766px) {
    .visible-xs-inline-block {
        display: inline-block !important;
    }
}

@media only screen and (768px <=width <=1279px) {
    .visible-sm {
        display: block !important;
    }

    table.visible-sm {
        display: table !important;
    }

    tr.visible-sm {
        display: table-row !important;
    }

    th.visible-sm,
    td.visible-sm {
        display: table-cell !important;
    }
}

@media only screen and (768px <=width <=1279px) {
    .visible-sm-block {
        display: block !important;
    }
}

@media only screen and (768px <=width <=1279px) {
    .visible-sm-inline {
        display: inline !important;
    }
}

@media only screen and (768px <=width <=1279px) {
    .visible-sm-inline-block {
        display: inline-block !important;
    }
}

@media only screen and (1280px <=width <=1839px) {
    .visible-md {
        display: block !important;
    }

    table.visible-md {
        display: table !important;
    }

    tr.visible-md {
        display: table-row !important;
    }

    th.visible-md,
    td.visible-md {
        display: table-cell !important;
    }
}

@media only screen and (1280px <=width <=1839px) {
    .visible-md-block {
        display: block !important;
    }
}

@media only screen and (1280px <=width <=1839px) {
    .visible-md-inline {
        display: inline !important;
    }
}

@media only screen and (1280px <=width <=1839px) {
    .visible-md-inline-block {
        display: inline-block !important;
    }
}

@media only screen and (1840px <=width <=4096px) {
    .visible-lg {
        display: block !important;
    }

    table.visible-lg {
        display: table !important;
    }

    tr.visible-lg {
        display: table-row !important;
    }

    th.visible-lg,
    td.visible-lg {
        display: table-cell !important;
    }
}

@media only screen and (1840px <=width <=4096px) {
    .visible-lg-block {
        display: block !important;
    }
}

@media only screen and (1840px <=width <=4096px) {
    .visible-lg-inline {
        display: inline !important;
    }
}

@media only screen and (1840px <=width <=4096px) {
    .visible-lg-inline-block {
        display: inline-block !important;
    }
}

@media only screen and (2px <=width <=766px) {
    .hidden-xs {
        display: none !important;
    }
}

@media only screen and (768px <=width <=1279px) {
    .hidden-sm {
        display: none !important;
    }
}

@media only screen and (1280px <=width <=1839px) {
    .hidden-md {
        display: none !important;
    }
}

@media only screen and (1840px <=width <=4096px) {
    .hidden-lg {
        display: none !important;
    }
}

.visible-print {
    display: none !important;
}

@media print {
    .visible-print {
        display: block !important;
    }

    table.visible-print {
        display: table !important;
    }

    tr.visible-print {
        display: table-row !important;
    }

    th.visible-print,
    td.visible-print {
        display: table-cell !important;
    }
}

.visible-print-block {
    display: none !important;
}

@media print {
    .visible-print-block {
        display: block !important;
    }
}

.visible-print-inline {
    display: none !important;
}

@media print {
    .visible-print-inline {
        display: inline !important;
    }
}

.visible-print-inline-block {
    display: none !important;
}

@media print {
    .visible-print-inline-block {
        display: inline-block !important;
    }
}

@media print {
    .hidden-print {
        display: none !important;
    }
}

/*Column Grids*/
.column-grid-container {
    display: flex;
    width: calc(100% + 16px);
    margin-left: -8px;
    gap: 0 0;
    flex-direction: row;
    flex-wrap: wrap;
}

.column-grid-container .col {
    box-sizing: border-box;
    padding: 0 8px;
}

.column-grid-container .col-0 {
    display: none;
}
.column-grid-container .col-1 {
    width: calc(100%/12);
}

.column-grid-container .col-2 {
    width: calc(100%/6);
}

.column-grid-container .col-3 {
    width: calc(100%/4);
}

.column-grid-container .col-4 {
    width: calc(100%/3);
}

.column-grid-container .col-5 {
    width: calc(100%/(12/5));
}

.column-grid-container .col-6 {
    width: calc(100%/2);
}

.column-grid-container .col-7 {
    width: calc(100%/(12/7));
}

.column-grid-container .col-8 {
    width: calc(100%/(12/8));
}

.column-grid-container .col-9 {
    width: calc(100%/(12/9));
}

.column-grid-container .col-10 {
    width: calc(100%/(12/10));
}

.column-grid-container .col-11 {
    width: calc(100%/(12/11));
}

.column-grid-container .col-12 {
    width: calc(100%);
}

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

    .column-grid-container .col-1-md {
        width: calc(100%/12);
    }

    .column-grid-container .col-2-md {
        width: calc(100%/6);
    }

    .column-grid-container .col-3-md {
        width: calc(100%/4);
    }

    .column-grid-container .col-4-md {
        width: calc(100%/3);
    }

    .column-grid-container .col-5-md {
        width: calc(100%/(12/5));
    }

    .column-grid-container .col-6-md {
        width: calc(100%/2);
    }

    .column-grid-container .col-7-md {
        width: calc(100%/(12/7));
    }

    .column-grid-container .col-8-md {
        width: calc(100%/(12/8));
    }

    .column-grid-container .col-9-md {
        width: calc(100%/(12/9));
    }

    .column-grid-container .col-10-md {
        width: calc(100%/(12/10));
    }

    .column-grid-container .col-11-md {
        width: calc(100%/(12/11));
    }

    .column-grid-container .col-12-md {
        width: calc(100%);
    }
}

@media only screen and (max-width: 1279px) {
    .column-grid-container {
        width: calc(100% + 12px);
        margin-left: -6px;
        gap: 0 0;
    }

    .column-grid-container .col {
        padding: 0 6px;
    }

    .column-grid-container .col-0-sm {
        display: none;
    }
    .column-grid-container .col-1-sm {
        width: calc(100%/8);
    }

    .column-grid-container .col-2-sm {
        width: calc(100%/4);
    }

    .column-grid-container .col-3-sm {
        width: calc(100%/(8/3));
    }

    .column-grid-container .col-4-sm {
        width: calc(100%/2);
    }

    .column-grid-container .col-5-sm {
        width: calc(100%/(8/5));
    }

    .column-grid-container .col-6-sm {
        width: calc(100%/(8/6));
    }

    .column-grid-container .col-7-sm {
        width: calc(100%/(8/7));
    }

    .column-grid-container .col-8-sm {
        width: calc(100%);
    }
}

@media only screen and (max-width: 766px) {
    .column-grid-container {
        width: calc(100% + 12px);
        margin-left: -6px;
        gap: 0 0;
    }

    .column-grid-container .col {
        padding: 0 6px;
    }

    .column-grid-container .col-0-xs {
        display: none;
    }
    .column-grid-container .col-1-xs {
        width: calc(100%/4);
    }

    .column-grid-container .col-2-xs {
        width: calc(100%/2);
    }

    .column-grid-container .col-3-xs {
        width: calc(100%/(4/3));
    }

    .column-grid-container .col-4-xs {
        width: calc(100%);
    }
}

/*Preformated styles*/
pre.code {
    tab-size: 4;
    line-height: 1.2em;
    background: #09122C;
    color: #EBE8DB;
    margin: 0 0 30px;
    box-sizing: border-box;
    padding: 20px;

    /* some extra styles*/
    text-align: justify;
    font-family: calibri, arial, sans-serif;
}

pre.code .query {
    color: #E17564;
}

pre.code .func {
    color: #BE3144;
}

pre.code .opts {
    color: #D76C82;
}

pre.code .val {
    color: #EBE8DB;
}