/* Style for demo RadComboBox 
    */

/* Importing styles */

/* Importing styles from FontAwsome && GoolgeFonts => 'Roboto', sans-serif */
@import url('lib.css');


/* +++++++++++++++++++++++++++++++++++++++++++++++++++
     START   -  RESET  RADCOMBOBOX
+++++++++++++++++++++++++++++++++++++++++++++++++++++   */

/* Class: .RadCombobox || .RadComboBox_Metro : this is is a div container of the elements tag*/

div .RadComboBox_Metro {
    border: solid 1px;
    border: solid 0px transparent;
    border-style: none;
    background: transparent;
}

    /* Class: .rcbInner => this is a span element tag whose containas just selection item and button tag with icon */

    div .RadComboBox_Metro span.rcbInner {
        border: solid 1px;
        background-color: transparent;
        color: #000;
        width: 0%;
        height: 0%;
 
    }

.RadComboBox_Metro span.rcbHovered .rcbActionButton:hover {
    background: transparent;
}

div .RadComboBox_Metro span.rcbHovered,
div .RadComboBox_Metro span.rcbReadOnly,
div .RadComboBox_Metro span.rcbReadOnly.rcbFocused,
div .RadComboBox_Metro span.rcbReadOnly.rcbExpand {
    background-color: transparent;
    box-shadow: none;

    border-color: none;
    border: solid 0px transparent;
    background-color: none;
}

/* Class: .rcbInput => input tag */

div .RadComboBox_Metro input.rcbInput {
    background: transparent;
    margin: 0px 0px;
    width: 0%;
    height: 0%;
    border: solid 0px transparent;
    border-style: none;
    box-shadow: none;

    padding: 0px 0px;
}

    div .RadComboBox_Metro input.rcbInput:focus,
    div .RadComboBox_Metro input.rcbInput:active,
    div .RadComboBox_Metro input.rcbInput:hover {
        background: transparent;
        border: solid 0px;
        border-style: none;
        box-shadow: none;
 
        outline: none;
    }

/* Class: .rcbActionbutton => this is is a button tag */

.RadComboBox_Metro .rcbActionButton {
    padding: 0px 0px;
    width: 0em;
    height: 0em;
    background: none;
    border: 0px none transparent;
    outline: none;
}


    .RadComboBox_Metro .rcbActionButton .p-icon::before {
        content: "";
    }





/* Class: .RadComboboxDropDown => this is a div, principal div container of elemnents */
form .rcbSlide .RadcomboBoxDropDown_Metro {
    border-color: none;
    color: #000;
    background-color: transparent;
    text-align: unset;
    border-style: none;
    border-width: 0px;
}

/* Class: .rcbHeader => header of template .RadComboBox */

form .rcbSlide .RadcomboBoxDropDown .rcbHeader {
    padding: 0px 0px;
    border: solid 0px transparent;
    border-color: none;
    border-style: none;
    border-bottom-width: 1px;
    margin-bottom: 0px;
}

form .RadComboBoxDropDown .rcbScroll {
    border: solid 0px transparent;
    border-style: none;
    border-width: 0px;
    width: 100%;
}

/* Style with out template */


form .RadComboBoxDropDown_Metro .rcbScroll .rcbHovered {
    background: transparent;
}


/* RadComboBox first insert */
.RadComboBoxServices > .rcbInputCell {
    /*border: solid 6px cyan;*/
    background-color: #fff;
}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++
     END   -  RESET  RADCOMBOBOX
+++++++++++++++++++++++++++++++++++++++++++++++++++++   */


/* +++++++++++++++++++++++++++++++++++++++++++++++++++
     START  -  NEW STYLE  RADCOMBOBOX
+++++++++++++++++++++++++++++++++++++++++++++++++++++   */

/* [ RadComboBox in RadGRid Paging ] */

.container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgAdvPart div.RadComboBox {
    width: 4em !important;
    min-width: 2em;
    height: 25px !important;
    max-height: 25px !important;

    border-radius: .25em;

}

    .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgAdvPart div.RadComboBox span.rcbInner {
        /*display: none;*/
        width: 4em !important;
        min-width: 2em;
        height: 25px !important;
        max-height: 25px !important;
        border: solid 1px var(--cw-color-outline-variant);
        padding: 0em 0em;
        cursor: pointer;
    }
        /* Input */
        .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgAdvPart div.RadComboBox span.rcbInner input[type="text"],
        /* Button */
        .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgAdvPart div.RadComboBox span.rcbInner button.rcbActionButton {
            margin: 0em 0em !important;
            padding: 0em 0em !important;
            cursor: pointer;
        }

        /* input */
        .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgAdvPart div.RadComboBox span.rcbInner input[type="text"] {
            text-align: center;
            font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
            font-size: 1em !important;
            color: #666666;
            width: 4em !important;
            min-width: 2em !important;
            max-width: 2em !important;
        }

        /* Button */
        .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgAdvPart div.RadComboBox span.rcbInner button.rcbActionButton {
            height: 20px !important;
            display: flex;
       
            justify-content: center;
            align-items: center;
        }

            .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgAdvPart div.RadComboBox span.rcbInner button.rcbActionButton span {
                width: 100%;
                height: 100%;
                display: flex;
                display: -ms-flexbox;
                justify-content: center;
                align-items: flex-end;
            }

                .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgAdvPart div.RadComboBox span.rcbInner button.rcbActionButton span.p-i-arrow-60-down::before {
                    font-family: "NewCwIcons";
                    content: "\ea02";
                    clear: both;
                    font-size: 1em;
                }

            .container .RadGrid .rgMasterTable div.NextPrevAndNumeric .rgWrap.rgAdvPart div.RadComboBox span.rcbInner button.rcbActionButton > span.rcbButtonText {
                display: none;
            }

/* [ RadComboBox in RadGRid Paging ] */

/* Class: .RadCombobox || .RadComboBox_Metro : this is is a div container of the elements tag*/

div .RadComboBox {
    /*width: auto;*/
    background: #fff;
    color: #000;
    padding-top: 0em !important;
    padding-bottom: 0em !important;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    /*box-shadow: 0px 0px 2px rgba(54,142,224,.5);
                -webkit-box-shadow:0px 0px 2px rgba(54,142,224,.5);
                -moz-box-shadow: 0px 0px 2px rgba(54,142,224,.5);
                -ms-box-shadow:0px 0px 2px rgba(54,142,224,.5);
                -o-box-shadow: 0px 0px 2px rgba(54,142,224,.5);*/
}


div .RadGrid thead div.rgEditForm .RadComboBox {
    /*border-bottom: solid 0em none;*/
}

/* .rgEditForm */
div .RadGrid div.rgEditForm .RadComboBox {

    height: 2em;
    /*border: solid 1px cyan;*/
    cursor: pointer;
}

/* Correct this is is for general becareful */
    div .RadGrid div.rgEditForm .RadComboBox span.rcbInner {
   
        height: 2em;
        text-align: left !important;
        cursor: pointer;
    }


        div .RadGrid div.rgEditForm .RadComboBox span.rcbInner span.rcbInput {
            width: auto;
            /*border: solid 1px; green;*/
        }

div .RadComboBox span.rcbInner:hover div .RadGrid div.rgEditForm .RadComboBox span.rcbInner:hover {
    color: #000 !important;
}
    /* --------------------------------------------------------------------------------------------------------------------------------------------------- /.rgEditForm */
  /* Juan [15..11.2021 ] Correcting details style for horizontal alineation  */
    div .RadGrid thead div.rgEditForm .RadComboBox .rcbInner, 
    div .RadGrid tbody div.rgEditForm .RadComboBox .rcbInner
    {
        background: #fff;
        margin-left: -4px;
        padding-top: .25em;
        padding-left: .25em !important;
        padding-bottom: .25em;
        color: #000;
        display: flex;
        display: -ms-flexbox;
        justify-content: flex-start;
        align-items: center;        
}


        div .RadGrid thead div.rgEditForm .RadComboBox .rcbInner:hover {
            background: var(--cw-color-primary-variant, #0d47a1);
            color: var(--cw-color-on-primary-variant, #FFF);
        }

.container .RadComboBox span.rcbInner,
.container .RadComboBox span.rcbInner.rcbHovered,
.container .RadComboBox span.rcbInner.rcbFocused {
    border: solid 1px #C3C0C0;
    border-radius: .40em;

    background: #fff;
}


.container .RadComboBox span.rcbInner {
    padding-top: 0em !important;
    padding-bottom: 0em !important;
}
/*Class: .rcbLabel => label tag */
div .RadComboBox .rcbLabel {
    background: #0d47a1;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
}
/* Class: .rcbInner => this is a span element tag whose containas just selection item and button tag with icon */

div .RadComboBox span.rcbInner {
    width: auto;
    /*padding: 4px;*/
    /*-------------------------*/
    /*border-bottom: solid 3px #2E86 C1;*/
    /*border: solid 1px cyan;*/
    /*display: flex;*/
    overflow: hidden;
}

/* Juan [15..11.2021 ] Correcting details style for input */

div .RadComboBox span.rcbInner  input.rcbInput{
    width: 98% !important;
    padding-left: .15em !important;
    margin-right: 1em !important;
}

div .RadGrid .rgEditForm .RadComboBox span.rcbInner  input.rcbInput{
    margin-left: .15em !important;
}

    div .RadComboBox span.rcbInner:hover {
        background: #0d47a1;
        color: #000;
        /*border: solid 1px #0d47a1;*/
        /*border-bottom: solid 3px  #093F92;*/
        height: 100%;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        rcbInner rcbReadOnly rcbExpanded -o-border-radius: 2px;
    }




    div .RadComboBox span.rcbInner.rcbFocused {
        background: #fff !important;
        /*border-bottom: solid 3px  #093F92 !important;*/
        color: #000 !important;
    }


div .RadComboBox span.rcbHovered,
/*div .RadComboBox span.rcbFocused,*/
div .RadComboBox span.rcbReadOnly.rcbExpand {
    background: #0d47a1;
    color: #000 !important;
    border-bottom: solid 3px #093F92;
    height: 100%;
    border-radius: 2px;

}




/* Class: .rcbInput => input tag */

div .RadComboBox_Metro input.rcbInput {
    width: auto;
    height: 100%;
    padding: 10px;
    color: #000;
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1em !important;
 
    text-align: left;
}


div .RadComboBox span.rcbHovered input.rcbInput {
    color: #000 !important;
}

/* Class: .rcbCombo => this is a span it is actived when makes click on item and display icon with text */

div .RadComboBox_Metro span.rcbInner .rcbCombo {
    /*border: solid 1px;*/
    width: 100%;
    height: 100%;
    padding: 10px;
    color: #000;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
}

div .RadComboBox_Metro span.cbl_icon_services {
    color: #fff;
    position: absolute;
    left: 2;
    margin-left: 12px;
}




div .RadComboBox_Metro span.rcbInner .rcbCombo span.text_service {
    text-align: intial;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-left: 40px;
    margin-top: 20px;
}

/*#ctl00_ContentPlaceHolder1_RadComboBox2*/
div .RadComboBox_Metro .rcbCombo span.cbl_icon_services {
    /*border: solid 1px cyan;*/
    position: absolute;
    left: 0;
    margin-left: 20px;
    margin-right: 5px;
    margin-top: -15px;
    color: #fff;
    padding-top: -4px;
    padding-bottom: 4px;
}


/*#ctl00_ContentPlaceHolder1_RadComboBox2*/
div .RadComboBox_Metro .rcbCombo i.fa-chevron-down {
    position: absolute;
    right: 0;
    margin-top: 3px;
    margin-right: 14px;
}

/*#ctl00_ContentPlaceHolder1_RadComboBox2*/
div .RadComboBox_Metro .cbl_icon_default {
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 20px;
    margin-top: -1px;
}

/* Class: .rcbActionbutton => this is is a button tag */

div .RadComboBox .rcbActionButton {
    /*border: solid 1px cyan !important;*/
    width: 2em;
    height: 2em;
    display: flex;

    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: transparent;
    color: #000;
}



div .RadGrid thead div.rgEditForm .RadComboBox .rcbActionButton,
div .RadGrid tbody div.rgEditForm .RadComboBox .rcbActionButton {
    /*border: solid 1px;*/
    display: flex;

    justify-content: center;
    align-items: center;
}


    div .RadGrid thead div.rgEditForm .RadComboBox .rcbActionButton .p-icon,
    div .RadGrid tbody div.rgEditForm .RadComboBox .rcbActionButton .p-icon {
        margin-top: 6px;
    }


.RadComboBox .rcbActionButton .p-icon::before {
    /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    content: "\f078";
    font-size: 12px;
    clear: both;
    color: #000;
    margin-top: 2px;
    margin-left: -1px;
    cursor: pointer;
}

div .RadComboBox span.rcbHovered .rcbActionButton span.p-icon::before {
    color: #000;
}



/* Class: .rcbSlide => this is a div, principal div container of elemnents */
#form1.rcbSlide {
    border: solid 1px #368ee0;
    width: auto;
}

    /* Class: .RadComboboxDropDown => this is a div, principal div container of elemnents */
    #form1 .rcbSlide .RadcomboBoxDropDown {
        background: #0d47a1;
        color: #fff;
        padding: 4px 4px;
    }




/* Class: .rcbHeader => header of template .RadComboBox */

#form1 .RadComboBoxDropDown .rcbHeader span {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    font-style: italic;
    color: #368ee0;
}


#form1 .RadComboBoxDropDown .rcbScroll {
 
    background: #ffffff;
    font-family: 'Roboto', sans-serif;
    border-radius: .25em;
 
}


    #form1 .RadComboBoxDropDown .rcbScroll::-webkit-scrollbar {
        width: 8px;
    }

    #form1 .RadComboBoxDropDown .rcbScroll::-webkit-scrollbar-track {
        background: var(--cw-color-surface-container);
    }


    #form1 .RadComboBoxDropDown .rcbScroll::-webkit-scrollbar-thumb {
        background: var(--cw-color-on-surface-variant);
        border-radius: 10px;
      
    }


/* .rgEditForm */

div .RadGrid div.rgEditForm .RadDropDown {
    width: 12em !important;
    height: 2em;
 
    cursor: pointer;
}

    div .RadGrid div.rgEditForm .RadDropDown span.rcbInner {
        width: 12em;
        height: 2em;
        cursor: pointer;
    }




        div .RadGrid div.rgEditForm .RadDropDown span.rcbInner span.rcbInput {
            width: auto;
            /*border: solid 1px; green;*/
        }

div .RadDropDown span.rcbInner:hover div .RadGrid div.rgEditForm .RadDropDown span.rcbInner:hover {
    color: #000 !important;
}


.container div.rcbSlide .RadComboBoxDropDown .rcbScroll {
  
    color: #000000 !important;
    background-color: #ffffff;
}

    .container div.rcbSlide .RadComboBoxDropDown .rcbScroll ul.rcbList {
        color: #000;
    }

        .container div.rcbSlide .RadComboBoxDropDown .rcbScroll ul.rcbList li.rcbItem {
            color: #000;
            cursor: pointer;
        }

        .container div.rcbSlide .RadComboBoxDropDown .rcbScroll ul.rcbList li.rcbHovered {
            color: #000 !important;
        }

/* --------------------------------------------------------------------------------------------------------------------------------------------------- /.rgEditForm */



#form1 .RadComboBoxDropDown .rcbScroll ul.rcbList li.rcbTemplate .cbl_icon_services {
    font-size: 1.25rem;
}

/*
                            
/* }*/


#form1 .RadComboBoxDropDown .rcbScroll ul.rcbList li.rcbHovered {
    background: #F0EFEF;
    color: #000000;
    border: solid 0em transparent !important;

    border-bottom: solid 2px rgba(240,239,239,.6) !important;
}





/* Style with out template */
form .RadComboBoxDropDown .rcbScroll .rcbItem {
    color: #000000;
    /*border-bottom: solid rgba(54,142,224,.3);*/
    border-width: 4px;
    padding: 4px;
}



/* ++++++++++++++  START ICONS - RADCOMBOBOX ++++++++++++++++++++++++*/
/* Handling icon */
.rcbInner.cbl_handling_icon:before,
/* AirCraft Charter icon */
.rcbInner.cbl_air_craft_charter_icon:before,
/* Transport icon */
.rcbInner.cbl_transport_icon:before,
/* Catering icon */
.rcbInner.cbl_catering_icon:before,
/* Store icon */
.rcbInner.cbl_store_icon:before,
/* Fuel icon */
.rcbInner.cbl_fuel_icon:before,
/*Mantenance icon */
.rcbInner.cbl_maintenance_icon:before,
/* Rental car icon */
.rcbInner.cbl_rental_car_icon:before,
/* hotel icon */
.rcbInner.cbl_hotel_icon:before,
.rcbInner.cbl_permissions_icon:before,
.rcbInner.cbl_airport_slot_icon:before,
/* Others icon */
.rcbInner.cbl_others_icon:before {
    color: #000;
    margin-left: 15px;
    font-size: 24px;
}


/* Handling icon */
.rcbInner.cbl_handling_icon.rcbHovered:before,
/* AirCraft Charter icon */
.rcbInner.cbl_air_craft_charter_icon.rcbHovered:before,
/* Transport icon */
.rcbInner.cbl_transport_icon.rcbHovered:before,
/* Catering icon */
.rcbInner.cbl_catering_icon.rcbHovered:before,
/* Store icon */
.rcbInner.cbl_store_icon.rcbHovered:before,
/* Fuel icon */
.rcbInner.cbl_fuel_icon.rcbHovered:before,
/*Mantenance icon */
.rcbInner.cbl_maintenance_icon.rcbHovered:before,
/* Rental car icon */
.rcbInner.cbl_rental_car_icon.rcbHovered:before,
/* hotel icon */
.rcbInner.cbl_hotel_icon.rcbHovered:before,
.rcbInner.cbl_permissions_icon.rcbHovered:before,
.rcbInner.cbl_airport_slot_icon.rcbHovered:before,
/* Others icon */
.rcbInner.cbl_others_icon.rcbHovered:before {
    color: #fff;
    margin-top: 5px;
    margin-left: 15px;
    font-size: 24px;
}


div .RadComboBox_Metro span.rcbInner::before {
    font-family: "NewCwIcons";
}

/* ++++++++++++++++ END ICONS  - RADCOMBOBOX ++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
         START   -    TRANSITIONS
 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
div .RadComboBox,
div .RadComboBox .rcbLabel,
div .RadComboBox span.rcbInner,
div .RadComboBox span.rcbHovered,
div .RadComboBox span.rcbReadOnly.rcbExpand,
div .RadComboBox_Metro input.rcbInput,
#form1 .RadComboBoxDropDown .rcbScroll ul.rcbList li.rcbTemplate,
#form1 .RadComboBoxDropDown .rcbScroll ul.rcbList li.rcbTemplate .text_service,
#form1 .RadComboBoxDropDown .rcbScroll ul.rcbList li.rcbTemplate .cbl_icon_services,
form .RadComboBoxDropDown .rcbScroll .rcbItem,
form .RadComboBoxDropDown .rcbScroll .rcbHovered {
    transition: all 0.3s ease-out;
}





/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
         END   -    TRANSITIONS         
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



/* Style for dRadDropdown */

/* Class: .RadDropDownList_Metro || .RadDropDownList_Metro_Metro : this is is a div container of the elements tag*/

div .RadDropDownList_Metro_Metro {
    border: solid 1px;
    border: solid 0px transparent;
    border-style: none;
    background: transparent;
}

    /* Class: .rddlInner => this is a span element tag whose containas just selection item and button tag with icon */

    div .RadDropDownList_Metro_Metro span.rddlInner {
        /*border: solid 1px;*/
        background-color: transparent;
        color: #000;
        width: 0%;
        height: 0%;
     
    }

.RadDropDownList_Metro_Metro span.rcbHovered .rddlSelect:hover {
    background: transparent;
}

div .RadDropDownList_Metro_Metro span.rcbHovered,
div .RadDropDownList_Metro_Metro span.rcbReadOnly,
div .RadDropDownList_Metro_Metro span.rcbReadOnly.rcbFocused,
div .RadDropDownList_Metro_Metro span.rcbReadOnly.rcbExpand {
    background-color: transparent;
    box-shadow: none;

    border-color: none;
    border: solid 0px transparent;
    background-color: none;
}

/* Class: .rddlFakeInput => input tag */

div .RadDropDownList_Metro_Metro input.rddlFakeInput {
    background: transparent;
    margin: 0px 0px;
    width: 0%;
    height: 0%;
    border: solid 0px transparent;
    border-style: none;
    box-shadow: none;
 
    padding: 0px 0px;
}

    div .RadDropDownList_Metro_Metro input.rddlFakeInput:focus,
    div .RadDropDownList_Metro_Metro input.rddlFakeInput:active,
    div .RadDropDownList_Metro_Metro input.rddlFakeInput:hover {
        background: transparent;
        border: solid 0px;
        border-style: none;
        box-shadow: none;

        outline: none;
    }

/* Class: .rddlSelect => this is is a button tag */

.RadDropDownList_Metro_Metro .rddlSelect {
    padding: 0px 0px;
    width: 0em;
    height: 0em;
    background: none;
    border: 0px none transparent;
    outline: none;
}


    .RadDropDownList_Metro_Metro .rddlSelect .p-icon::before {
        content: "";
    }





/* Class: .RadDropDownList_MetroDropDown => this is a div, principal div container of elemnents */
form .rddlSlide .RadDropDownList_MetroDropDown_Metro {
    border-color: none;
    color: #000;
    background-color: transparent;
    text-align: unset;
    border-style: none;
    border-width: 0px;
}

/* Class: .rcbHeader => header of template .RadDropDownList_Metro */

form .rddlSlide .RadDropDownList_MetroDropDown .rcbHeader {
    padding: 0px 0px;
    border: solid 0px transparent;
    border-color: none;
    border-style: none;
    border-bottom-width: 1px;
    margin-bottom: 0px;
}

form .RadDropDownList_MetroDropDown .rddlPopup {
    border: solid 0px transparent;
    border-style: none;
    border-width: 0px;
    width: 100%;
}

/* Style with out template */


form .RadDropDownList_MetroDropDown_Metro .rddlPopup .rcbHovered {
    background: transparent;
}


/* RadDropDownList_Metro first insert */
.RadDropDownList_MetroServices > .rddlFakeInputCell {
    border: solid 6px cyan;
    background-color: #000;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++
     END   -  RESET  RadDropDownList_Metro
+++++++++++++++++++++++++++++++++++++++++++++++++++++   */


/* +++++++++++++++++++++++++++++++++++++++++++++++++++
     START  -  NEW STYLE  RadDropDownList_Metro
+++++++++++++++++++++++++++++++++++++++++++++++++++++   */


/* Class: .RadDropDownList_Metro || .RadDropDownList_Metro_Metro : this is is a div container of the elements tag*/

div .RadDropDownList_Metro {

    border-radius: 4px;

    box-shadow: none;

}

.RadDropDownList_Metro .rddlFocused {
    background-color: var(--cw-color-primary-container) !important;
    color: var(--cw-color-on-primary-container) !important;
    border-color: var(--cw-color-outline-variant) !important;
}

.rddlPopup_Metro .rddlItemSelected {
    background-color: var(--cw-color-primary) !important;
    color: var(--cw-color-on-primary) !important;
}

/*div .RadGrid thead div.rgEditForm .RadDropDownList_Metro,
div .RadGrid tbody div.rgEditForm .RadDropDownList_Metro {
    margin-top: 1em;
}*/

    div .RadGrid thead div.rgEditForm .RadDropDownList_Metro .rddlInner,
    div .RadGrid tbody div.rgEditForm .RadDropDownList_Metro .rddlInner {
/*        background: #368ee0;*/
        margin-left: -4px;
        padding-top: .25em;
        padding-bottom: .25em;
        display: flex;

        justify-content: center;
        align-items: center;
        height: 30px;
        border: solid 0em transparent;
    }



        div .RadGrid thead div.rgEditForm .RadDropDownList_Metro .rddlInner span.rddlFakeInput,
        div .RadGrid tbody div.rgEditForm .RadDropDownList_Metro .rddlInner span.rddlFakeInput {
            margin-top: 5px;
        }

        div .RadGrid thead div.rgEditForm .RadDropDownList_Metro .rddlInner:hover {
            background: var(--cw-color-primary-variant);
        }




/*Class: .rcbLabel => label tag */
div .RadDropDownList_Metro .rcbLabel {
    background: var(--cw-color-primary-variant);
    color: var(--cw-color-on-primary-variant);
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
}
/* Class: .rddlInner => this is a span element tag whose containas just selection item and button tag with icon */

div .RadDropDownList_Metro span.rddlInner {
    width: auto;
 
    overflow: hidden;
}

    div .RadDropDownList_Metro span.rddlInner:hover {
        background: var(--cw-color-primary-variant);
        color: var(--cw-color-on-primary-variant);
        height: 100%;
        border-radius: 2px;
    }




    div .RadDropDownList_Metro span.rddlInner.rcbFocused {
        background: var(--cw-color-primary-variant);
        border-bottom: solid 3px #093F92 !important;
    }


div .RadDropDownList_Metro span.rcbHovered,
div .RadDropDownList_Metro span.rcbFocused,
div .RadDropDownList_Metro span.rcbReadOnly.rcbExpand {
    background: var(--cw-color-primary-container);
    color: var(--cw-color-on-primary-container);
    border-bottom: solid 1px #CCC;
    height: 100%;
    border-radius: 2px;
  
}



/* Class: .rddlFakeInput => input tag */

div .RadDropDownList_Metro_Metro input.rddlFakeInput {
    width: auto;
    height: 100%;
    padding: 10px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;

}
/* Class: .rcbCombo => this is a span it is actived when makes click on item and display icon with text */

div .RadDropDownList_Metro_Metro span.rddlInner .rcbCombo {
    /*border: solid 1px;*/
    width: 100%;
    height: 100%;
    padding: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
}

div .RadDropDownList_Metro_Metro span.cbl_icon_services {
    color: #fff;
    position: absolute;
    left: 2;
    margin-left: 12px;
}



div .RadDropDownList_Metro_Metro span.rddlInner .rcbCombo span.text_service {
    text-align: intial;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-left: 40px;
    margin-top: 20px;
}

/*#ctl00_ContentPlaceHolder1_RadDropDownList_Metro2*/
div .RadDropDownList_Metro_Metro .rcbCombo span.cbl_icon_services {
    /*border: solid 1px cyan;*/
    position: absolute;
    left: 0;
    margin-left: 20px;
    margin-right: 5px;
    margin-top: -15px;
    color: #fff;
    padding-top: -4px;
    padding-bottom: 4px;
}


/*#ctl00_ContentPlaceHolder1_RadDropDownList_Metro2*/
div .RadDropDownList_Metro_Metro .rcbCombo i.fa-chevron-down {
    position: absolute;
    right: 0;
    margin-top: 3px;
    margin-right: 14px;
}

/*#ctl00_ContentPlaceHolder1_RadDropDownList_Metro2*/
div .RadDropDownList_Metro_Metro .cbl_icon_default {
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 20px;
    margin-top: -1px;
}

/* Class: .rddlSelect => this is is a button tag */

div .RadDropDownList_Metro .rddlSelect {

    display: flex;

    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: transparent;
    color: #fff;
}



div .RadGrid thead div.rgEditForm .RadDropDownList_Metro .rddlSelect,
div .RadGrid tbody div.rgEditForm .RadDropDownList_Metro .rddlSelect {
    /*border: solid 1px;*/
    display: flex;

    justify-content: center;
    align-items: center;
}


    div .RadGrid thead div.rgEditForm .RadDropDownList_Metro .rddlSelect .p-icon,
    div .RadGrid tbody div.rgEditForm .RadDropDownList_Metro .rddlSelect .p-icon {
        margin-top: 6px;
    }


.RadDropDownList_Metro .rddlSelect .p-icon::before {
    /* This icon font is taken from the webpage fontawesome.com . Free icon Licence to use it in personally or comercially */
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    content: "\f078";
    font-size: 12px;
    clear: both;
    color: #000;
    margin-top: 6px;
    margin-left: -2px;
    cursor: pointer;
}



/* Class: .rddlSlide => this is a div, principal div container of elemnents */
#form1.rddlSlide {
    border: solid 1px #368ee0;
    width: auto;
}

    /* Class: .RadDropDownList_MetroDropDown => this is a div, principal div container of elemnents */
    #form1 .rddlSlide .RadDropDownList_MetroDropDown {
        background: #0d47a1;
        color: #fff;
        padding: 4px 4px;
    }


/* Class: .rcbHeader => header of template .RadDropDownList_Metro */

#form1 .RadDropDownList_MetroDropDown .rcbHeader span {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    font-style: italic;
    color: #368ee0;
}


#form1 .RadDropDownList_MetroDropDown .rddlPopup {
    background-image: linear-gradient(rgba(13,71,161,.8), rgba(13,71,161,.8)), url("../../Images/cbl_free_images/ServicesProvidersSelect.jpg"); /* This image is taken from the web page : https://unsplash.com/photos/tCp2K2sYpFg. This website is CCO (Creative Common free licence usefull free persnally and comercially, Photo by Iwan Shimko on Unsplash ) */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-family: 'Roboto', sans-serif;
}


    #form1 .RadDropDownList_MetroDropDown .rddlPopup::-webkit-scrollbar {
        width: 8px;
    }

    #form1 .RadDropDownList_MetroDropDown .rddlPopup::-webkit-scrollbar-track {
        background: #0d47a1;
    }


    #form1 .RadDropDownList_MetroDropDown .rddlPopup::-webkit-scrollbar-thumb {
        background: #368ee0;
        border-radius: 10px;

    }



    #form1 .RadDropDownList_MetroDropDown .rddlPopup ul.rddlList li.rcbTemplate .cbl_icon_services {
        margin-left: 20px;
    }




    #form1 .RadDropDownList_MetroDropDown .rddlPopup ul.rddlList li.rcbHovered {
        background: #368ee0;
        color: #fff;
        border-bottom: solid rgba(255,255,255,.6);
        border-width: 4px;
        padding: 4px;
    }





/* Style with out template */
form .RadDropDownList_MetroDropDown .rddlPopup .rddlItem {
    color: #fff;
    border-bottom: solid rgba(54,142,224,.3);
    border-width: 4px;
    padding: 4px;
}




/* Size of RadCombox */
.cblRadCombobox.cblMinW28em{
    min-width: 28em !important;   
}


.cblRadCombobox.cblMinW25D3em{
    min-width: 25.3em !important;   
    margin-left: -0.15em !important;
}