/* ROCOMAMAS STYLESHEET ONLY */

/* fonts */
@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');

@font-face {
    font-family: 'American Captain';
    src: url('/assets/fonts/american_captain-webfont.woff2') format('woff2'),
        url('/assets/fonts/american_captain-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cheddar Gothic Sans';
    src: url('/assets/fonts/cheddargothic-sans-webfont.woff2') format('woff2'),
        url('/assets/fonts/cheddargothic-sans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* end fonts */

html {
    background: #ECEAE6;
}

body {
    background: #ECEAE6;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    font-size: 14px;
    color: #000;
}

h1,
h2,
h3 {
    color: #000;
    font-family: 'American Captain','Cheddar Gothic Sans', 'Roboto', sans-serif;
    text-transform: uppercase;
    font-weight: 800;
}

h4,
h5,
h6 {
    color: #000;
    font-family: 'Cheddar Gothic Sans','Roboto', sans-serif;
    font-weight: 500 !important;
    text-transform: lowercase !important;
    letter-spacing: 0.1rem;
}
h1 {font-size: 44px;line-height: 52px;}
h2 {font-size: 36px;line-height: 44px;}
h3 {font-size: 32px;line-height: 40px;}
h4 {font-size: 28px;line-height: 36px;}
h5{font-size: 24px; line-height: 32px;}
h6 {font-size: 20px;line-height: 28px;}



html.login-pg {
    background: url(../images/rocomamas-login-bg.jpg) no-repeat scroll 0 0 #000 !important;
    background-size: cover !important;
}

.login-pg label {
    color: #fff;
}

/* left menu bar */
.topbar .topbar-left,
.side-menu.left {
    background-color: #141419;
}

#sidebar-menu>ul>li>a {
    color: #fff;
}

#sidebar-menu>ul>li>a .menu-item span {
    font-family: 'Cheddar Gothic Sans';
    text-transform: lowercase;
    letter-spacing: 0.1rem;
    font-size: 20px;
    line-height: 2rem;
}

#wrapper.enlarged #sidebar-menu>ul>li>a .menu-item span {
    font: inherit;
    text-transform: inherit;
    letter-spacing: normal;
}

#sidebar-menu>ul>li>a.active .menu-item,
#sidebar-menu>ul>li:hover>a.active .menu-item {
    background-color: #D96727;
    color: #fff;
}

#sidebar-menu>ul>li>a.active .btn,
#sidebar-menu>ul>li:hover>a.active .btn {
    background: #D96727;
}

#sidebar-menu>ul>li>a.active i.icon {
    color: #fff;
}

#sidebar-menu>ul>li:hover>a .menu-item {
    background: #2D2D37;
}

#sidebar-menu>ul>li:hover>a .btn {
    background: #2D2D37;
    color: inherit;
}

#sidebar-menu ul ul {
    background: #2D2D37;
}

#sidebar-menu ul ul a {
    color: #ccc;
}

#sidebar-menu ul ul a:hover {
    color: #ffffff;
}

#sidebar-menu ul ul li.active a {
    color: #ffffff;
}

#wrapper.enlarged .left.side-menu #sidebar-menu ul>li:hover>ul {
    background: #2D2D37;
}

/* topbar */
.navbar.navbar-light {
    background: #ECEAE6;
}

/* buttons */
.btn {
    font-family: 'Cheddar Gothic Sans';
    letter-spacing: .05em;
    line-height: 2rem;
    text-transform: lowercase;
}
.btn-primary {
    background-color: #D96727 !important;
    border-color: #D96727 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.focus,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.open>.dropdown-toggle.btn-primary {
    background-color: #D96727 !important;
    border: 1px solid #D96727 !important;
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary.focus,
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover,
.open>.dropdown-toggle.btn-secondary {
    background-color: #000 !important;
    border: 1px solid #000 !important;
}

.btn-outline-secondary {
    color: #000;
    border: 1px solid #000;
}

.btn-outline-secondary:hover,
.btn-outline-secondary.hover,
.btn-outline-secondary:focus,
.btn-outline-secondary.focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    background-color: #000;
    color: #ffffff;
}

.btn-light {
    color: #8A94A6;
    background-color: #ECEAE6 !important;
}

#login_confirm .btn-link {
    color: #FF8C00 !important;
    font-weight: 500;
}

#login_confirm .btn-link:hover,
#login_confirm .btn-link.hover,
.btn-link:focus,
.btn-link.focus {
    background-color: rgba(217, 103, 39, 0.08) !important;
    color: #FF8C00;
    text-decoration: none;
}

.panel-color .close {
    color: #fff;
    opacity: .4;
}

/* labels and badges */
.label-default {
    background-color: #FEE7D2;
    color: #231F20;
}

/* panels and cards */
.coursediv.panel:hover {
    -moz-box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.24);
    -webkit-box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.24);
    box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.24);
}

.panel-primary>.panel-heading {
    background-color: #000;
}

.panel {
    -moz-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.16);
}

/* backgrounds */
.bg-background {
    background-color: #ECEAE6 !important;
}

.half-bg {
    background: linear-gradient(#000 50%, #ffffff 50%);
}

.panel-fill.panel-dark {
    background-color: #000;
}

.bg-primary {
    background-color: #FF8C00 !important;
}

.bg-secondary {
    background-color: #000 !important;
}

.bg-success {
    background-color: #5BBD72 !important;
}

.bg-info {
    background-color: #005EA2 !important;
}

.bg-warning {
    background-color: #DFD155 !important;
}

.bg-danger {
    background-color: #D95C5C !important;
}

.bg-custom-1 {
    background-color: #000 !important;
}

.bg-custom-2 {
    background-color: #D96727 !important;
}

.bg-custom-3 {
    background-color: #FF8C00 !important;
}

/* navtabs and pills */
.nav.nav-tabs.pills>li.active>a {
    background: #000;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover,
.tabs-vertical>li.active>a,
.tabs-vertical>li.active>a:focus,
.tabs-vertical>li.active>a:hover {
    color: #D96727 !important;
}

.nav.nav-tabs>li.active>a {
    border-bottom: 1px solid #D96727 !important;
}

.nav-pills>li>a {
    color: #000;
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
    background-color: #000;
}

.nav-pills>li.selected>a,
.nav-pills>li.selected>a:focus,
.nav-pills>li.selected>a:hover {
    background-color: #000;
}

/* progress bars */
.progress-bar-success {
    background-color: #5BBD72;
}

/* footer */
.footer {
    background-color: #ECEAE6;
    color: #000;
}