/* General Colors */
:root {
    --color-bg-light: #F4F1FA;
    --color-bg-highlight: #F4E9FD;
    --text-gray-light: #808080;
    --color-primary: #6667AB;
    --color-secondary: #8083BF;
    --color-accent: #A9ABD9;
    --color-dark: #000000;
    --color-light: #FFFFFF;
    --color-complementary-accent: #F6F6FF;
    --color-complementary-light: #D1D2F0;
    --color-complementary-dark: #8C5D42;
    --color-danger: #D70808;
    --color-primary-darken: #4F508C;
}

/* Navbar styles */
.navbar {
    background-color: var(--color-accent) !important;
    color: #333;
}

.RadMenu_Default .rmRootGroup,
.RadMenu_Default a.rmLink,
.RadMenu_Default .rmGroup .rmText,
.RadMenu_Default .rmVertical .rmText,
.RadMenu_Default .rmLeftArrow,
.RadMenu_Default .rmRightArrow,
.RadMenu_Default .rmTopArrow,
.RadMenu_Default .rmBottomArrow,
.RadMenu_Default .rmIcon {
    background-image: none !important;
}

.RadMenu.navbar,
.RadMenu.navbar .rmRootGroup,
.RadMenu.navbar .rmHorizontal {
    background-color: var(--color-accent) !important;
    color: var(--color-dark) !important;
}

    .RadMenu.navbar .rmLink {
        text-decoration: none;
    }

        .RadMenu.navbar .rmLink:hover {
            background-color: var(--color-complementary-light) !important;
            color: var(--color-dark) !important;
        }

    .RadMenu.navbar .rmItem {
        background-color: var(--color-accent) !important;
    }

    .RadMenu.navbar .rmItemHover {
        background-color: var(--color-complementary-light) !important;
    }

    .RadMenu.navbar .rmGroup {
        background-color: var(--color-accent) !important;
    }

        .RadMenu.navbar .rmGroup .rmItem {
            background-color: var(--color-accent) !important;
        }

        .RadMenu.navbar .rmGroup .rmItemHover {
            background-color: var(--color-complementary-light) !important;
            color: var(--color-dark) !important;
        }

    .RadMenu.navbar .rmItem.rmSelected {
        background-color: var(--color-complementary-light) !important;
        color: var(--color-dark) !important;
    }

.navbar-margin {
    margin-bottom: 8px;
}
/* Title styles */
.title-hospital {
    color: var(--color-primary);
    font-weight: bold;
    font-size: 11pt;
}

.title-dark {
    color: var(--color-dark) !important;
}

/*a {
    color: var(--color-primary-darken) !important; SE APLICA A LA NAVBAR, CREAR UNA CLASE PARA "IR AL LISTADO DE LACTANTES QUE FIGURAN COMO NO FINALIZADOS"
}*/

/* Background styles */
.bg-buttons {
    background-color: var(--color-complementary-accent);
    padding: 1rem;
    border-radius: 5px;
}

.bg-user {
    background-color: var(--color-complementary-accent) !important;
    border-radius: 5px;
    border: none !important;
    /*color: var(--color-complementary-dark) !important;*/
}

.bg-header {
    background-color: var(--color-secondary);
    color: var(--color-light);
    padding: 5px;
}

.bg-baby {
    background-color: var(--color-complementary-accent);
}

.bg-light-border {
    background-color: var(--color-bg-light);
    border-radius: 10px;
}

.bg-primary { 
    background-color: var(--color-primary);
}

.bg-accent {
    background-color: var(--color-complementary-accent) !important;
}

.bg-complementary-light {
    background-color: var(--color-complementary-light) !important;
}

.bg-highlight {
    background-color: var(--color-bg-highlight);
}

td.bg-header.padding-1 {
    display: none !important;
}

.info-bar {
    color: var(--text-gray-light) !important;
    font-size:12px !important;
}

/* Button styles */
.button {
    background-color: var(--color-secondary);
    color: #fff;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

    .button:hover {
        background-color: darken(var(--color-secondary), 10%);
    }

.button-outline {
    background-color: transparent;
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
}

    .button-outline:hover {
        background-color: var(--color-secondary);
        color: #fff;
    }

.button-logout {
    background-color: var(--color-complementary-accent) !important;
}

.button-login {
    padding: 6px 90px !important;
    background-color: var(--color-secondary) !important;
    border: 1px solid var(--color-secondary) !important;
    width: 100% !important;
}

    .button-login:hover {
        padding: 6px 90px !important;
        background-color: var(--color-primary) !important;
        border: 1px solid var(--color-secondary) !important;
    }

/* Bootstrap Blue Button  */
.RadButton.RadButton_Bootstrap.rbPrimaryButton {
    border-left: 1px solid var(--color-secondary) !important;
    border-right: 1px solid var(--color-secondary) !important;
    border-top: 1px solid var(--color-secondary) !important;
    border-bottom: 1px solid var(--color-secondary) !important;
    border-radius: 6px !important; /*10px !important;*/
    padding: 6px 8px !important; /*7px 10px !important;*/
    background-color: var(--color-secondary) !important; /* #fff8f2 !important;*/
    font-size: 12px !important; /*10px;*/
    /*font-weight: bold;*/
    margin-top: 0px;
    cursor: pointer !important;
    text-align: center !important;
    color: var(--color-light) !important;
    min-width: 50px;
}

    .RadButton.RadButton_Bootstrap.rbPrimaryButton:hover {
        background-color: var(--color-primary) !important;
        transition-duration: .05s;
    }

span.RadButton_Bootstrap.rbSkinnedButton.rbPrimaryButton .rbDecorated {
    height: 20px !important;
    line-height: 0px !important;
    padding: 0 !important;
    font-family: Aptos, Calibri, sans-serif !important;
    font-size: 13px !important;
    min-width: 50px;
}

/* Bootstrap White Button */
span.RadButton_Bootstrap .rbDecorated {
    height: 20px !important;
    line-height: 0px !important;
    padding: 0 !important;
    font-family: Aptos, Calibri, sans-serif !important;
    font-size: 13px !important;
    min-width: 50px;
    color: var(--color-primary-darken);
}

/*    span.RadButton_Bootstrap .rbDecorated:hover {
        color: var(--color-light) !important;
    }*/

    span.RadButton_Bootstrap.rbSkinnedButton, span.RadButton_Bootstrap.rbLinkButton, span.RadButton_Bootstrap.rbVerticalButton, span.RadButton_Bootstrap.RadButton.rbDisabled {
        border: 1px solid var(--color-accent) !important;
        color: var(--color-primary) !important;
    }

        span.RadButton_Bootstrap.rbSkinnedButton:hover, span.RadButton_Bootstrap.rbLinkButton, span.RadButton_Bootstrap.rbVerticalButton, span.RadButton_Bootstrap.RadButton.rbDisabled {
            background-color: var(--color-complementary-accent) !important;
            box-shadow: none !important;
            color: var(--color-light) !important;
        }

        /*    .RadButton.RadButton_Bootstrap.rbPrimaryButton input[type="submit"] {
        font-size: 10px !important; 
        font-weight: bold !important; 
        padding: 0 !important; 
        margin: 0 !important; 
        border: none !important;
    }

    .RadButton.RadButton_Bootstrap.rbPrimaryButton input[type="hidden"] {
        display: none; 
    }

span.RadButton_Bootstrap.rbSkinnedButton,
span.RadButton_Bootstrap.rbLinkButton,
span.RadButton_Bootstrap.rbVerticalButton,
span.RadButton_Bootstrap.RadButton.rbDisabled,
span.RadButton_Bootstrap.RadButton.rbDisabled:hover,
span.RadButton_Bootstrap.RadButton.rbDisabled:active,
span.RadButton_Bootstrap.RadButton.rbDisabled:focus {

}*/
        .button-cancel {
            background-color: red !important;
            color: white !important;
            top: 1px;
            left: 7px;
            font-size: 10px !important;
            font-weight: bold !important;
            border: none !important;
            border-radius: 10px !important;
            padding: 4px 8px !important;
            height: 30px !important;
        }

    .button-cancel span.RadButton_Bootstrap.rbSkinnedButton,
    .button-cancel span.RadButton_Bootstrap.rbLinkButton,
    .button-cancel span.RadButton_Bootstrap.rbVerticalButton,
    .button-cancel span.RadButton_Bootstrap.RadButton.rbDisabled,
    .button-cancel span.RadButton_Bootstrap.RadButton.rbDisabled:hover,
    .button-cancel span.RadButton_Bootstrap.RadButton.rbDisabled:active,
    .button-cancel span.RadButton_Bootstrap.RadButton.rbDisabled:focus {
        height: 30px !important;
    }

     .button-cancel input[type="submit"] {
        font-size: 10px !important; 
        font-weight: bold !important; 
        padding: 0 !important;
        margin: 0 !important; 
        border: none !important; 
    }

    .button-cancel input[type="hidden"] {
        display: none;
    }

.btn-home {
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--color-primary) !important;
}

span.RadButton_Bootstrap.rbSkinnedButton.rbPrimaryButton.btn-home {
    border: 1px solid var(--color-primary) !important;
}
/* Image Styles */
.logo {
    height: 25px;
    width: 80px;
    padding-top: 5px;
}

.logo-td {
    height: 25px !important;
    display: flex;
}

/* Padding */
.padding-1 {
    padding:1px;
    border-radius:2px;
}

/* Table */
/*.table-header {
    background-color: var(--color-secondary);
    font-weight: bold;
    text-align: center;
    color: var(--color-light);
}*/

.RadGrid_Bootstrap.table-header .rgHeader {
    background-color: var(--color-secondary) !important;
    font-weight: bold;
    text-align: center;
    color: var(--color-light);
}

.RadGrid_Bootstrap .table-header .rgMasterTable .rgSelectedCell, .RadGrid_Bootstrap .rgSelectedRow > td, .RadGrid_Bootstrap td.rgEditRow .rgSelectedRow, .RadGrid_Bootstrap .rgSelectedRow td.rgSorted {
    color: var(--color-dark);
    background: var(--color-complementary-light);
    border-color: var(--color-light);
    font-style:normal;
/*    font-style: oblique;*/
}

.RadGrid_Bootstrap .rgPagerCell .rgNumPart a.rgCurrentPage {
    background-color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    color: var(--color-light);
}

.RadGrid_Bootstrap .rgMasterTable {
    color: var(--color-dark) !important;
}

.RadGrid_Bootstrap .rgRow a{
    color: var(--color-primary-darken) !important;
}

.RadGrid_Bootstrap .rgAltRow a {
    color: var(--color-primary-darken) !important;
}

.RadGrid_Bootstrap .rgHeader a {
    color: var(--color-light) !important;
}

.RadGrid .rgMasterTable {
    border-collapse: collapse !important;
}

.RadGrid_Bootstrap .rgMasterTable {
    color: transparent !important;
}

    /* Labels */
    .highlight-label {
    background-color: var(--color-complementary-accent);
    text-align: center;
}

.secondary-label {
    background-color: var(--color-light);
    border-color: var(--color-secondary);
    color: var(--color-primary);
}

/* Margin */
.margin-left-2 {
    margin-left: 2px !important;
}

.margin-left-4 {
    margin-left: 4px !important;
}

.margin-left-8 {
    margin-left: 8px !important;
}

.margin-bottom-4 {
    margin-bottom: 4px !important;
}

.margin-bottom-45 {
    margin-bottom: 45px !important;
}

.margin-top-4 {
    margin-top: 4px !important;
}

.margin-top-10 {
    margin-top: 10px !important;
}

.padding-left-0 {
    padding-left: 0 !important;
}

/* Border */
.border-primary {
    border: 1px solid var(--color-primary) !important;
}

.custom-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 15px;
}

    .custom-login input[type="text"],
    .custom-login input[type="password"],
    .custom-login button {
        width: 160px; /* Mismo ancho para todos */
        height: 20px; /* Mismo alto para todos */
        font-size: 1em;
        padding: 5px;
        margin-left:2px;
    }

.danger {
    color: var(--color-danger) !important;
}

.center-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.align-content {
    display: flex;
    align-items: center;
}

/* Navbar baby page */
.RadTabStripTop_Bootstrap .rtsLevel1 .rtsSelected {
    font-weight: bold !important;
    background: var(--color-primary-darken) !important;
    color: var(--color-light) !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.RadTabStripTop_Bootstrap .rtsLevel1 .rtsLink {
    border-radius: 5px 5px 0px 0px;
    background: var(--color-primary);
    color: var(--color-light);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-light);
    border-bottom-color: var(--color-light);
    width: 72px;
    font-size: 12px;
}

.RadTabStripTop_Bootstrap .rtsLI + .rtsLI {
    padding-left: 0 !important;
}

.RadTabStrip_Bootstrap .rtsLevel1 .rtsLink:hover{
    background-color: var(--color-secondary) !important;
}

.RadTabStrip_Bootstrap .rtsLink {
    padding: 6px 15px !important;
}