@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

.bottomright-with-nw-resize-outer {
    /* Here's the trick: rotate the entire element so the resize handle is in the other corner. */
    transform: rotateZ(180deg);
    /* Note that in order to make resize: both work, an overflow is needed with anything other than visible.
	   Set it to auto so we don't see scrollbars,
	   but this element should never actually overflow as the only child has fixed 100% width and height.
	*/
    resize: both;
    overflow: auto;
    /* Need a little padding for this element for the resize handle to be clickable.
	   Also note the rotation flips the directions that need padding. */
    padding: 0 8px 8px 0;
    /* Should work for position fixed or absolute, as long as it is bottom/right positioned. */
    position: fixed;
    bottom: 10px;
    right: 10px;
    /* initial size can be anything, but usually wise to set it to something sensible initially. */
    height: 100px;
    width: 100px;
}

.vs-code-editor {
    min-height: 63vh;
}

.bottomright-with-nw-resize-inner {
    /* Rotate everything back so content is right way up: */
    transform: rotateZ(180deg);
    /* Grow along with resizable parent: */
    width: 100%;
    height: 100%;
    /* make contents scrollable if resizable parent gets to small: */
    overflow: auto;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0366d6;
}

.cleanBtn {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.loginButton {
    border-radius: .5vw;
    background-color: white;
}

#alertContainer {
    justify-content: flex-end;
    align-items: center;
    width: 1.2vw;
    position: absolute;
    margin-top: 13px;
    margin-left: 23px;
    z-index: 100;
}

.cartNumberContainer {
    height: .8vw;
    width: .8vw;
    background-color: #CC2227;
    border-radius: 50%;
    display: inline-block;
    color: white;
    position: absolute;
}

#numberInCart {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white !important;
    font-size: .6vw;
    margin-top: -0.1vw;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.main {
    margin-left: 50px;
}

    .main .top-row {
        background-color: #f7f7f7;
        border-bottom: 1px solid #d6d5d5;
        justify-content: flex-end;
        z-index: 100;
    }

        .main .top-row > a {
            margin-left: 1.5rem;
        }

.sidebar {
    transition: width ease-out 0.2s;
    background-image: linear-gradient(180deg, #571316 0%, #000000 70%);
}
    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .oi {
        width: 1rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar:hover {
        z-index: 200;
        position: absolute;
    }

        .sidebar:hover .nav-item {
            font-size: 0.9rem;
            padding-bottom: 0.5rem;
        }

        .sidebar:hover .tooltiptext {
            visibility: visible;
            width: 100%;
        }

.site-home-button img {
    height: 2.5rem;
    width: 2.5rem;
    display: block;
    margin-right: auto;
    margin-left: 0.3rem;
}

.site-home-button {
    height: 100%;
    padding: 0;
    margin: 0;
}

.nav-item .tooltiptext {
    visibility: hidden;
    text-align: center;
    position: absolute;
    z-index: 100;
    text-align: left;
    margin-left: 50px;
}

.nav-item {
    padding-bottom: 0.5rem;
    min-width: 230px;
    width: 100%;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .nav-item a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        position: sticky;
    }

        .nav-item a.active {
            background-color: rgba(255,255,255,0.25);
            color: white;
            width: 100%;
        }

        .nav-item a:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
            width: 100%;
        }

.nav-link {
    cursor: pointer;
}

.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/*Spin Loader*/
.loaderContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45vw;
    width: 100%;
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

.loadingInput {
    background-color: #ffffff;
    background-image: url("https://loadinggif.com/images/image-selection/3.gif");
    background-size: 25px 25px;
    background-position: right center;
    background-repeat: no-repeat;
}

.pointer {
    cursor: pointer;
}

.samp {
    background: #000;
    border: 3px groove #ccc;
    color: #ccc;
    display: block;
    padding: 5px;
}

.rz-dialog-content {
    height: 100%;
}

.my-rz-side-dialog {
    display: flex;
    flex-direction: column;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/*End Spin Loader*/

@media screen and (max-width: 2375px) and (min-width: 1565px) {
    #alertContainer {
        margin-left: 27.4px;
        margin-top: 13px;
        z-index: 100;
    }
}

@media (max-width: 960px) {
    .main {
        margin-left: 0vw;
    }

        .main .top-row {
            display: none;
        }

    .sidebar:hover {
        width: auto;
        z-index: 0;
        position: inherit;
    }

    .sidebar .tooltiptext {
        visibility: visible;
        width: 100%;
        text-align: left;
        margin-left: 11vw;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }
}

@media (min-width: 961px) {
    .sidebar {
        width: 50px;
        min-height: 100vh;
        position: absolute;
        top: 0;
        z-index: 200;
        background-image: linear-gradient(180deg, #9d2227 0%, #341314 70%);
    }

        .sidebar .collapse {
            /* Never collapse the sidebar for wide screens */
            display: flex;
        }
}

@media print {
    .sidebar {
        display: none;
    }
}