/**************************
    FIX DE PAGELAYOUT
***************************/


.t-container {
    padding: 0px !important;
}

.t-container-static {
    width: 100% !important;
}

.RadButton.RadRadioButton span.rbText.rbToggleRadioChecked, .RadButton.RadRadioButton span.rbText.rbToggleRadio, .RadButton.RadCheckBox span.rbText.rbToggleCheckbox, .RadButton.RadCheckBox span.rbText.rbToggleCheckboxChecked {
    padding: 0 0 0 2em !important;
}

.RadButton.RadRadioButton span.rbText.rbToggleRadioChecked:before, .RadButton.RadRadioButton span.rbText.rbToggleRadio:before, .RadButton.RadCheckBox span.rbText.rbToggleCheckbox:before, .RadButton.RadCheckBox span.rbText.rbToggleCheckboxChecked:before {
    font-size: 26px !important;
    padding-right: 10px;
    top: -4px;
}

.t-col {
    min-height: 30px !important;
    margin-top: 3px;
    margin-bottom: 0;
    padding-left: 0px !important;
    padding-right: 10px !important;
    padding-top: 0px;
    padding-bottom: 0px;
    vertical-align: top !important;
}

.t-col-no-padding {
    padding: 0 !important;
}

.clave { /* al menos hasta cambiar todo a pagelayout*/
    padding-left: 18px !important;
    padding-right: 3px !important;
    border-radius: 7px 0px 0px 7px;
    background-color: #f7f7f8;
    color: #46494a;
}

.t-col.key {
    vertical-align: middle !important;
    padding-right: 3px !important;
    padding-left: 18px !important;
    padding-top: 4px !important;
    border-radius: 7px 0px 0px 7px;
    background-color: #f7f7f8;
    color: #46494a;
    /*margin-top: 3px;*/
}

@media (max-width: 768px) {
    .t-col.key {
    }
}

.t-row {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

/*SOLO EN PAGINAS QUE SE NECESITE 100% del ancho */
html .t-container-fluid,
html .t-row-wrap > .t-row {
    max-width: none !important;
}

html .t-container-fluid {
    padding: 0px !important;
}




/**************************
   MASTERPAGE
***************************/

.logo {
    top: -3px;
    position: absolute;
}

#logoText {
    display: none;
}

/* Telerik admin told me to add this to set height automaticaly and not fixed based on first level number of items */
html .RadMenuPopup .rmGroup {
    height: auto;
}

#adminMenuDiv {
    max-width: 100%;
}

.rmSlide {
    z-index: 8000 !important;
}

.content-box {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;
}

body h1 {
    color: #fff;
   /* position: absolute;*/
    top: 11px;
    left: 200px;
    font-size: 16pt;
    margin: 0;
}

@media (max-width: 768px) {
    .content-box {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 6px;
    }

        .content-box h1 {
            color: #fff;
            position: fixed;
            top: 14px;
            left: 60px;
            font-size: 13pt;
        }

    .logo {
        right: 2px;
        top: 3px;
    }

        .logo a .imgLogoMain {
            display: none;
        }

    #logoText {
        display: block;
    }

    .logo a #logoText {
        color: #FFF;
        font-weight: bold;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 2em;
        padding: 3px 2px 0px 5px;
    }

    .hideOnMobile {
        display: none;
    }

    #adminMenuDiv {
        position: absolute;
        top: 3px;
    }

    #lblUserName {
        margin-right: 42px;
    }

    .RadMenu_MetroTouch .rmRootToggle {
        color: #fff !important;
        background-color: #3baade !important;
        border-top: none !important;
        border-left: none !important;
        border-bottom: none !important;
        border-right: #fff solid 1px;
        box-shadow: none !important;
        width: 52px !important;
        padding-top: 3px;
    }

    #header-box {
        border: none;
    }

    .loginCenterBox {
        width: 100% !important;
        border: none !important;
    }

    .loginContent {
        padding: 10px !important;
    }
}

.adminMenuOverwrite {
    z-index: 1200 !important;
}

@media (min-width: 769px) {
    .adminMenuOverwrite .rmRootGroup.rmHorizontal {
        border-style: none !important;
    }

    .adminMenuOverwrite.RadMenu_MetroTouch .rmRootGroup.rmHorizontal {
        /*background-color: #EEE !important;
    color: #000 !important;*/
    }

        .adminMenuOverwrite.RadMenu_MetroTouch .rmRootGroup.rmHorizontal .rmItem {
            /*background-color: #EEE !important;
    border-color: #959595;*/
        }



    .hideOnDesktop {
        display: none;
    }
}

.menuContainer {
    margin-left: 10px;
}

@media (max-width: 768px) {
    .menuContainer {
        margin-left: 0px;
    }
}

.menuContainer .RadMenu_MetroTouch .rmRootGroup .rmRootLink:hover {
    color: #FFFFFF;
    background-color: #3baade;
    border-color: #3baade;
}

.menuContainer .RadMenu .rmRootGroup {
    background-color: #66bde5;
    color: #FFFFFF;
}



/**************************
   RESPONSIVE WINDOW
***************************/
div.window.responsive {
    height:auto !important;
}

@media (max-width: 768px) {
    div.window.responsive {
        width: 100%;
        margin: 0px;
        left: 0px;
        top: 0px;
        border:none;
    }
}

.window .content {
    margin:20px;
}

div.window.responsive video {
    width: 100%;
    position: absolute;
}

/***************************
    CHECKBOXES
**************************/
.RadCheckBox {
    padding-right: 10px !important;
}

/*.RadForm_Metro label.rfdCheckboxChecked, .RadForm_Metro label.rfdCheckboxUnchecked, .RadForm_Metro label.rfdRadioChecked, .RadForm_Metro label.rfdRadioUnchecked {*/
.RadForm label.rfdCheckboxUnchecked:before, .RadForm label.rfdCheckboxChecked:before, .RadForm label.rfdRadioUnchecked:before, .RadForm label.rfdRadioChecked:before {
    font-size: 26px !important;
    top: 0 !important;
}


/*****************************
    ICONS
************************/

.rbCustomIcon {
    background-size: contain !important;
}

.gridActionImage {
    max-width: 30px;
    width: 30px;
}

    .gridActionImage input {
        height: 23px;
    }

/**********************************
    DRAWERS
********************************/

.drawer {
    display: block;
}

.drawer-close-button {
    display: none;
}

button[data-drawer] {
    display: none;
    width: 100% !important;
}

@media (max-width: 768px) {
    .drawer {
        display: inline-block;
    }

        .drawer .drawer-right,
        .drawer .drawer-left {
            position: fixed !important;
            top: 0 !important;
            z-index: 4450;
            height: 100vh;
            background-color: #25a0da;
            width: 85vw !important;
        }

        .drawer.open:after {
            content: attr(data-after);
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 4400;
        }

    .drawer-right {
        right: -100vw !important;
        transition: transform linear 0.15s;
    }

    .drawer .drawer-content {
        position: relative;
        padding: 7px;
        margin: 7px;
        background-color: #FFFFFF;
    }


    .open .drawer-right {
        /*right: 0 !important;*/
        transform: translateX(-100vw);
    }

    .drawer fieldset {
        padding-top: 0 !important;
        padding-bottom: 10 !important;
        padding-right: 0 !important;
        padding-left: 5px !important;
    }

    .drawer-close-button {
        width: 42px;
        padding-left: 0px;
        padding-right: 0px;
        min-width: 42px !important;
        background-color: #1d7daa !important;
        color: #FFFFFF !important;
        border: none !important;
        display: initial;
    }

    button[data-drawer] {
        display: initial;
    }
}


/********************************
    Grid Edit InPlace
***********************************/
.rgEditRow td .RadComboBox,
.rgEditRow td .RadInput {
    width: 100%;
}