/* Copyright (c) 2020 SwipeClock Workforce Management */

#main
{
    margin: 56px 0px 0px 240px;
    transition: margin ease 0.55s;
}

#main-content
{
    padding: 10px;
}

.mt-5, .my-5
{
    margin-top: 0px !important;
}



/* - - - - - - - - SWIPECLOCK COLORS - - - - - - - - */
.sc-dblue
{
    background-color: #262f3f !important;
    color: #fff;
}

.sc-dblue-light
{
    background-color: #515965 !important;
    color: #fff;
}

.sc-green
{
    background-color: #00C070 !important;
    color: #fff;
}

.sc-green-light
{
    background-color: #33CD8D !important;
    color: #fff;
}

.sc-lblue
{
    background-color: #67BAEA !important;
    color: #fff;
}

.sc-lblue-light
{
    background-color: #85C8EE !important;
    color: #fff;
}

.sc-teal
{
    background-color: #49BCB3 !important;
    color: #fff;
}

.sc-teal-light
{
    background-color: #6DC9C2 !important;
    color: #fff;
}

.sc-black
{
    background-color: #000000 !important;
    color: #fff;
}

.sc-gray, .sc-grey
{
    background-color: #404040 !important;
    color: #fff;
}

.sc-gray-light, .sc-grey-light
{
    background-color: #808080 !important;
    color: #fff;
}

.sc-gray-lighter, .sc-grey-lighter
{
    background-color: #bfbfbf !important;
    color: #000
}

.sc-white
{
    background-color: #F7FCFE !important;
    color: #000;
}

.btn.sc-dblue:hover, .btn.sc-dblue-light:hover, .btn.sc-green:hover, .btn.sc-green-light:hover,
.btn.sc-lblue:hover, .btn.sc-lblue-light:hover, .btn.sc-teal:hover, .btn.sc-teal-light:hover,
.btn.sc-black:hover, .btn.sc-gray:hover, .btn.sc-grey:hover, .btn.sc-gray-light:hover,
.btn.sc-grey-light:hover
{
    color: #fff;
}

.btn.sc-white:hover, .btn.sc-gray-lighter:hover, .btn.sc-grey-lighter:hover
{
    color: #000;
}



/* - - - - - - - - TOP NAV - - - - - - - - */
.navbar
{
    z-index: 1040;
    padding-right: 10px;
}

.button-collapse
{
    display: none;
}

.search-text
{
    font-weight: bold;
    padding-right: 2px;
}

.search-box::placeholder
{
    color: #aeaeae;
}

.search-box::-webkit-input-placeholder
{
    color: #aeaeae;
}

.search-box:-ms-input-placeholder
{
    color: #aeaeae;
}

#search-button
{
    font-size: 0.74rem;
    margin: 0px 6px 3px;
}

.settings-link
{
    padding-right: 3px;
}



/* - - - - - - - - SIDE NAV - - - - - - - - */
.side-nav
{
    margin-top: 54px !important;
}

.light-blue-skin .side-nav .collapsible li .collapsible-header.active,
.light-blue-skin .side-nav .collapsible li .collapsible-header:hover,
.current
{
    background-color: rgba(0,0,0,0.27);
}

.side-nav.wide .logo-wrapper.sn-ad-avatar-wrapper
{
    padding: 0px;
}

.side-nav.wide .logo-wrapper.sn-ad-avatar-wrapper a
{
    padding: 19px 10px;
}

.side-nav.wide .collapsible a, .side-nav.wide.slim .collapsible a
{
    padding-left: 17px;
}

.side-nav.wide .collapsible-body a
{
    padding-left: 47px;
}

.side-nav.wide.slim .collapsible-body a
{
    padding-left: 23px;
}

.side-nav.wide .fa, .side-nav.wide .fas
{
    text-align: center !important;
    padding-right: 5px;
}

.side-nav.wide .fas.rotate-icon
{
    padding-right: 0px;
}

#client-info
{
    padding-top: 10px;
    width: 100%;
    position: fixed;
    bottom: 125px;
    background-color: rgba(0,0,0,0.15);
    transition: opacity ease 0.55s;
    z-index: -1;
}

#client-info div.container
{
    padding: 0px 20px 0px 23px;
}

.minimize-button
{
    position: fixed;
    left: 0;
    bottom: 54px;
    width: 100%;
}



/* - - - - - - - - ANIMATIONS - - - - - - - - */
@keyframes hideClientInfo
{
    from
    {
        opacity: 0;
    }

    to
    {
        opacity: 1;
    }
}

.side-nav #client-info .row .col-8
{
    animation: hideClientInfo 250ms ease-in-out both;
}



/* - - - - - - - - MEDIA QUERIES - - - - - - - - */
@media (max-width: 500px)
{
    .search-text
    {
        display: none;
    }
}

@media (max-width: 440px)
{
    .settings-link
    {
        display: none;
    }
}

@media (max-width: 380px)
{
    .search-box
    {
        width: 160px;
    }

    #search-button
    {
        padding: 0.5rem 0.85rem;
    }
}

@media (max-width: 329px)
{
    .search-container
    {
        display: none;
    }
}

@media (max-height: 535px)
{
    #client-info
    {
        opacity: 0 !important;
    }
}