﻿/*@import url('https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i|Lato:400,400i,700,700i');*/
@import url('FontsLato/latofonts.css');

@import url('jquery.rangeSelect.css');
@import url('jquery.jscrollpane.css');
@import url('select2.css');
/* MODS FOR Select2 */
.select2-container--default .select2-results__option[aria-selected=true] {
    display: none;
}

:root {
  --black: #222222;
  --cerulean: #0099cc;
  --deep-sea-blue: #005a87;
  --duck-egg-blue: #c9eaf5;
  --white: #f2f2f1;
  --red: #ff0000;
  --medium-green: #3aa333;
  --pinkish-grey: #c9c9c9;
  --warm-grey: #a0a0a0;
  --brownish-grey: #666666;
  --steel-grey: #698486;
  --white-two: #fafaf9;
  --scarlet: #d0011b;
  --squash: #f6a623;
  --tree-green: #429321;
  --avocado: #8dc032;
}
.popup * { box-sizing: border-box;}

/* Service classes */
.popup .row { clear:both; width: 100%; white-space: initial; }
    .popup .row p { margin:0;  }
    .popup .row.paragraphLabel { font-weight: bold; font-size: 16px; }

.popup .row.separator { position: relative; margin: 20px 0; display: block; border-bottom: 1px solid #ccc; }
.popup .row.separator span { position: absolute; left:0; top:-8px; font-size: 12px; background-color: #fff; padding-right: 8px; color: #ccc; font-style: italic}
.popup .popup-table { display: table; width: 100%; border-spacing: 0; position: relative; }
.popup .table-row { display: table-row; margin: 0; padding: 0; }
.popup .table-cell { display: table-cell; border-collapse: separate; }
    .popup .popup-table.margin-10 { border-spacing: 10px;}
    .popup .popup-table.margin-20 { border-spacing: 20px;}
    .popup .popup-table.margin-30 { border-spacing: 30px;}
    .popup .popup-table.margin-40 { border-spacing: 40px;}
    .popup .popup-table.margin-50 { border-spacing: 50px;}
.popup .table-cell > div { float: left; white-space: normal; }
    .popup .table-cell > div.innerLabel { margin-right: 10px; min-width: 120px;margin-top: 6px; }

.popup .inline { display: inline-block; position: relative; }
.popup .inline > span { display: inline-block; vertical-align: middle; margin-top: -5px;}
/*.popup span.separator { position: absolute; right:0; height: 100%; width: 1px; background-color: #eee; }*/

.popup .cell-100 { width: 100%; }
.popup .cell-70 { width: 70%; }
.popup .cell-60 { width: 60%; }
.popup .cell-50 { width: 50%; }
.popup .cell-40 { width: 40%; }
.popup .cell-35 { width: 35%; }
.popup .cell-30 { width: 30%; }
.popup .cell-25 { width: 25%; }

.popup .row.margin-10 { margin-bottom: 10px; }
.popup .row.margin-20 { margin-bottom: 20px; }
.popup .row.margin-30 { margin-bottom: 30px; }
.popup .row.margin-40 { margin-bottom: 40px; }
.popup .row.margin-50 { margin-bottom: 50px; }

/* VALIDATOR CLASSES */
input[type=text].notValid,
input[type=password].notValid,
div.RadComboBox.notValid,
textarea.notValid,
select.notValid {
    border: 1px solid #843534 !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #d0011b !important;
    outline: none !important;
    outline-color: none !important;
    font-family: Karla;
}

.popup .validator {display: none; color: #222; vertical-align: top; font-weight: bold; margin-top: 3px; }
    .popup .validator.visible { display: inline-block;}
    .popup .validator.validator-error, .popup .validator.notValid { color: #d0011b; display: block !important; }
    .popup .validator.validator-success , .popup .validator.valid { color: #2c962e; display: block !important;}

/* END Service classes*/

/* ICON CLASSES */
.popup .icon { display: inline; padding: 0px 10px; min-height: 12px; }
    .popup .icon.icon-info { background: center center no-repeat url(../Images/icona-info.png); }
/* END ICON CLASSES */

body.popup {
    box-sizing: border-box;
    padding: 40px 35px 40px 35px;
    margin: 0;
    width: 820px;

    /* DEFAULT FONT: */
    font-family: Karla, Tahoma, Verdana;
    font-size: 14px;
    letter-spacing: normal;
    /* FOR TEST PURPOSE: */
    /*background-color: chartreuse;*/
}

body.sm-popup { width: 620px; }
body.err-popup { width: 540px; }
body.md-popup { width: 740px; }
body.md-popup2 { width: 760px; }
body.lg-popup { width: 950px; }
body.yt-popup { width: 970px; }
body.scheduleAdd { width: 680px; padding: 30px 40px !important; }
/* BUTTONS */
.popup .button {
    height: 44px;
    border-radius: 3px;
    border: none;
    background-color: #f2f2f1;
    box-shadow: 0 2px 0 0 #c4c4c4;
    font-family:  'Lato', sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
    padding: 0px 40px;
}

    .popup .button.blueButton {
        background-color: #0099cc;
        background-color: var(--cerulean);
        box-shadow: 0 2px 0 0 #005a87;
        box-shadow: 0 2px 0 0 var(--deep-sea-blue);

        text-transform: uppercase;
    }
        .popup .button.blueButton.disabled { box-shadow: 0 1px 0 0 #a0a0a0; background-color: #c9c9c9; }
        /*.popup .button.blueButton:hover { background-color: #005a87; background-color: var(--deep-sea-blue); }*/

    .popup .button.cancelButton {
          font-family:  'Karla', sans-serif;
          font-size: 14px;
          background-color: transparent;
          color: #0099cc;
          color: var(--cerulean);
          font-weight: normal;
          box-shadow: none;
          text-shadow: none;
          text-decoration: underline;
    }
        .popup .button.cancelButton:hover {
            color: #005a87;
            color: var(--deep-sea-blue);
        }
        .popup .button.cancelButton.autoSize { width: auto; height: auto; }

.popup .whiteButton { 
    min-width: 92px; 
    height: 26px; 
    border-radius: 3px; 
    background-color: #FFF;
    font-family:  'Lato', sans-serif;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    border: solid 1px #222;
    border: solid 1px var(--black);
    color: #222;
    color: var(--black);
    text-transform: uppercase;

}

    .popup .whiteButton.resetButton:hover {
        background-color: #0099cc;
        color: #FFF;
    }

    .popup .whiteButton:disabled {
        border-color: #a0a0a0;
        color: #a0a0a0;
    }
    .popup .whiteButton:disabled:hover {
        background-color: #FFF;
        cursor: default;
    }
    .popup .whiteButton.ceruleanCaption {
        border: solid 1px #0099cc;
        border: solid 1px var(--cerulean);
        color: #0099cc;
        color: var(--cerulean);
        padding: 0 60px;
    }
        /*.popup .whiteButton.ceruleanCaption:hover,*/
        .popup .whiteButton.ceruleanCaption.selected {
            background-color: #0099cc;
            background-color: var(--cerulean);
            color: #FFF;
        }


/* Scaffolding */
.popup div.popupContent { width: 100%; }
.popup .popupHeader-Container { width: 100%; } /* margin-bottom: 40px; */
.popup .popupBody-Container { width: 100%; margin-bottom: 0px; padding-bottom: 30px; }
.popup .popupBody-Container.noMargin { padding-bottom: 0; }

.popup .popupFooter-Container { width: 100%; margin-top: 10px;}
    .popup .popupFooter-Container .buttons-container { text-align: right; }

/* Il footer della popup di errore ha footer diverso: */
.err-popup .popupFooter-Container {position: absolute; bottom:0; left:0; right: 0; }
.err-popup .popupFooter-Container {position: absolute; bottom:40px; left:0; right: 0; padding-right: 50px; }

.popup .ErrorMsg {
    color: #222;
    /*font-weight: normal;*/
    font-size: 14px;
    font-weight: bold;
}

/* NAVIGATION TABS */
.popup .navTabs { display:block; width: 100%; border:0; margin: 0; margin-bottom: 20px; }
    .popup .navTabs ul { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #f2f2f1; border-bottom: 1px solid var(--white); }
        .popup .navTabs ul > li { 
            display: inline-block;
            font-size: 12px;
            font-weight: normal;
        }
            .popup .navTabs ul > li > a {
                display: inline-block;
                vertical-align: top;
                padding: 0 8px;
                height: 40px;
                line-height: 40px;
                text-decoration: none;
                white-space: nowrap;
                cursor: pointer;
                color: #646464;
            }

            .popup .navTabs ul > li > a.highlight,
            .popup .navTabs ul > li > a:hover { text-decoration: none; color: #0099cc; color: var(--cerulean); }
                .popup .navTabs ul > li > a.highlight { font-weight: bold; border-bottom: 4px solid #0099cc; border-bottom: 4px solid var(--cerulean); }

/* Text And Labels*/
.popup .Title { font-family:  'Lato', sans-serif; font-size: 24px; line-height: 1.67; }
    .popup .Title.inline { padding-right: 20px; min-width: 35%;}
.popup .subTitle { padding: 40px 0 10px 0; font-family:  'Karla', sans-serif; font-size: 16px; font-weight: bold; line-height: 1.67; }

.popup .SideTitle { margin-top: -5px;}
.popup .label {
    font-size: 16px;
    font-weight: bold;

}
.popup .labelTextBox {
    font-size: 16px;
    vertical-align: middle;
    text-align:right;
    padding-right: 20px !important;
}
.popup .mandatoryField { color: #F00; }
.popup .mandatoryField:after { content: '*'; }
.popup .confirmActionText {
    vertical-align: middle;
    height: 86px;
    line-height: 38px;
    border-radius: 8px;
    background-color: #f0f8fb;
    text-align: center;
    padding-left: 0;
    font-family:  'Lato', sans-serif;
    font-size: 36px;
    text-transform: uppercase;

}

.popup .Label {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    font-family:  'Karla', sans-serif;
    font-size: 14px;
    line-height: 17px;
    color: #222;
    padding: 0;
    margin: 0;

}
.popup .smallLabel {
    display:block;
    font-size: 12px;
    font-style: italic;
    color: #666666;
    color: var(--brownish-grey);
}
.popup .lblConfirm {
    display: block;
    clear: both;
}
.popup .warningMessage {
    
    clear: both;
    display: inline-block;
    margin: 0;
    margin-top: 30px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    border-radius: 8px;
    background-color: #fbea90;
    padding: 3px 8px;

}

.popup .warningMessage.full {
    width: 100%;
}

    .popup .warningMessage > span {
        min-width: 241px;
        min-height: 17px;
        padding: 3px 8px;
    }

.popup .Info-container {
    display: block;
    text-align: left;
    margin: 5px 0;
}
.popup .Info-container #moreInfoLink {
    font-family:  'Karla', sans-serif;
    font-size: 12px;
    color: #0099cc;
    color: var(--cerulean);
}
    .popup .Info-container #moreInfoLink:hover {
        color: var(#005a87);
        color: var(--deep-sea-blue);
    }

/* Default CHECKBOX styling */
/*.popup input[type="checkbox"] { display: none; }
.popup label { cursor: pointer; }

.popup input[type="checkbox"] + label:before {
    border: solid 1px #a6a6a6;
    background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
    content: "\00a0";
    display: inline-block;
    font: 12px/1em sans-serif;
    width: 12px;
    height: 12px;
    margin: 0 .25em 0 0;
    padding:0;
    vertical-align: top;
    border-radius: 3px;
    margin-top: 1px;

}
.popup input[type="checkbox"]:checked + label:before { color: #222; content: "\2713"; text-align: center; }
.popup input[type="checkbox"]:checked + label:after { font-weight: bold; }
.popup input[type="checkbox"][disabled] + label{ color: #999 !important; }*/

/* Default TEXTBOX styling */
.popup input.popupBaseInput[type="text"] {
    /* !IMPORTANT è stato messo per contrastare le classi telerik */
    
    font-family:  'Lato', sans-serif;
    height: 30px;
    border-radius: 2px;
    background-color: #fff;
    color: #222 !important;
    box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px #dad9d6;
    padding: 2px 10px;
    width: 100%;
}
    .popup input.popupBaseInput[type="text"]:hover { border: solid 1px #dad9d6; }
    .popup input.popupBaseInput[type="text"].borderRed { border-color: red !important; }
    .popup input.popupBaseInput[type="text"].borderGreen { border-color: green !important; }



.popup .popupDatePicker table td { height: 30px; }

/* -- SPECIFIC FOR ShutdownServer -- */
.popup .whiteButton.stopButton {
    background: 8px center no-repeat url(../Images/icon-stop.png);
    height: 30px;
    padding: 9px 15px 9px 34px;
    font-family:  'Lato', sans-serif;
    font-size: 10px;
    line-height: 10px;
    font-weight: bold;
}

/*.popup .whiteButton.stopButton:hover {
    background-image: none;
    border-radius: 3px;
    background-color: #0099cc;
    color: #ffffff;
}*/

.popup .whiteButton.resetButton {
    background: 8px center no-repeat url(../Images/icon-reset.png);
    height: 30px;
    padding: 9px 15px 9px 34px;
    font-family:  'Lato', sans-serif;
    font-size: 10px;
    line-height: 10px;
    font-weight: bold;
}
/* -- SPECIFIC FOR LogDetails -- */
.popup table.LogDetails { width: 100%; padding: 0; margin:0; }
    .popup table.LogDetails tr td {padding: 1px 5px;}
.popup table.LogDetails tr td:last-child { font-weight: bold; text-align: left;  width: 70%;  }
.popup table.LogDetails tr td:first-child { text-align: right; width: 30%;  }
/* -- SPECIFIC FOR EditVMName */
.popup .warningMessage.full b:first-child { text-transform: uppercase; }

/* -- SPECIFIC FOR StrongConfirm -- */
.popup .lblStrongConfirm > b:last-child { text-transform: uppercase; }
.popup #txtAction {width: 334px;}

/* -- SPECIFIC FOR TemplateSelector -- */
.popup .labelSearch {
    font-size: 16px;
    vertical-align:central;
    text-align:right;
    padding-right: 20px !important;
    min-width: 150px;
    white-space: nowrap;
}
.popup .templateSelector-container {
    display: block;
    width: 100%;
    height: 300px;
    position: relative;
}
.popup .template-list {
    display: block;
    width: 250px;
    height: 100%;
}
    .popup .template-list .template {
        display: table;
        position: relative;
        width: 210px;
        height: 30px;
        margin-left: 10px;
        margin-bottom: 10px;
        text-align: left;
        font-size: 11px;
        text-transform: none;
        font-family: Karla;
        white-space: nowrap;
    }
        .popup .whiteButton.template {
        border: solid 1px #c9c9c9;
        border: solid 1px var(--pinkish-grey);
        color: #222;
        color: var(--black);
        font-weight: normal;
        padding: 3px;

    }
        .popup .whiteButton.template:hover {
            background-color: #c9c9c9;
            background-color: var(--pinkish-grey);
            color: #222;
            color: var(--black);
        }
            .popup .whiteButton.template.selected {
                box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
                border: solid 2px #0099cc;
                border: solid 2px var(--cerulean);
                color: #0099cc;
                color: var(--cerulean);
                font-weight: bold;
            }
        .popup .template-list .template.hidden { display: none; }

/* JSCROLLPANE container div */
#TemplateList-wrapper {
    width: 250px;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

.popup .templateInfo-container .tags-container {
    margin-top: 5px;
    position: relative;
}
    .popup .templateInfo-container .tag {
        display: inline-block;
        height: 20px;
        width: auto !important;
        min-width: 0;
        line-height: 18px;
        margin-right: 5px;
        padding: 0 5px !important;
        margin-bottom: 5px;
        text-align: left;
        font-size: 10px;
        text-transform: none;
        font-family: Lato;
        white-space: nowrap;
    }
        .popup .templateInfo-container .tag:hover {
        }

    .popup .templateInfo-container {
        display: inline-block;
        vertical-align: top;
        position:absolute;
        height: 100%;
        left: 260px;
        top:0;
        right:0;
        bottom:0;
        overflow-y: scroll;
    }
        .popup .template-list .template > .templateDescription {
            display: table-cell;
            vertical-align: middle;
            line-height: 11px;
            padding-left: 30px;
            width: 100%;
            white-space: normal;
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
        }
        .popup .template-list .template > .templateImage {
            display: block;
            position: absolute;
            top: 3px;
            left: 3px;
        }
        .popup .template-list .template > .templateImage.overlay { display:none; }

        .popup .template-list .template > .templateImage img {
            width: 24px;
            height: 24px;
            margin: 0 5px 0 3px;    
        }

        .popup .templateSelector-container #lblTemplateName{ word-wrap: break-word; word-break: break-all; }
        .popup .templateSelector-container #rightContent-wrapper > table{ table-layout: fixed;}

.popup .comboPopup { background: none;  border: solid 1px #dad9d6 !important; border-radius: 4px; width: 100%; }
.popup .comboPopup .rcbInput { height: 30px; font-style: normal !important; }
    .popup .comboPopup .rcbInput table td { height: 30px !important; }
    .popup .comboPopup .rcbInputCell, .popup .comboPopup .rcbArrowCell { background: none !important; }
     .popup .comboPopup .rcbArrowCell { 
         background: url(../Images/pnl15/path-gray.png) center center no-repeat !important;
         border-left: solid 1px #dad9d6 !important;
         }
     .popup .comboPopup .rcbArrowCell a { width: 25px; }
     
/* JSCROLLPANE BAR COLOR: */
.popup .jspDrag {
    background-color: #c9c9c9;
    background-color: var(--pinkish-grey);
}

/* ---- OLD STYLES ---*/
.rgAdvPart {
    display: none;
}

.required {
    color: Red !important;
    font-size: 8pt !important;
}

.caption {
    font-size: 10pt;
}

.tdInsertField {
    height: 31px;
    vertical-align: top;
    padding-top: 6px;
}

.reToolCell {
    height: 30px !important;
}

.btnDownloadContract {
    border: 0px;
    background-color: transparent;
    width: 113px;
    height: 23px;
    cursor: pointer;
    font-size: 9pt;
    font-weight: bold;
    background-image: url(../Images/manage/consultation/btnDLbg.png);
    background-repeat: no-repeat;
}

.txtAreaContract {
    resize: none !important;
    width: 492px !important;
    height: 120px !important;
    border: 1px solid #7c99b4 !important;
}

.templatePopUpTxt {
    font-size: 9pt;
}

.templatePopUpBorder {
    border: 1px solid #abc1de;
}

.templateBgGridFirstRow {
    height: 20px;
    background-image: url(../Images/Template/gray_bg.png);
    background-repeat: repeat-x;
    border-top: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
}

.templateBorderFirstCell {
    border-left: 1px solid #c4c4c4;
    padding-left: 5px;
}

.templateBorderLastCell {
    border-right: 1px solid #c4c4c4;
}

.templateBorderLastCellBlue {
    border-right: 1px solid #abc1de;
}

.templateBorderFirstCellBlue {
    border-left: 1px solid #abc1de;
    padding-left: 5px;
    height: 20px;
}

.tdSpacer {
    height: 4px;
}

.templateBorderBottom {
    border-bottom: 1px solid #abc1de;
    font-size: 8pt;
    text-align: center;
    margin-top: 13px;
}

.templateImgCell {
    height: 32px;
    width: 86px;
    border-left: 1px solid #abc1de;
}

.divAlert {
    background-color: #FFF5C9;
    border: 1px solid #FFE29D;
}

.serialConfigurator {
    border: 1px solid #ffdaac;
    background-color: #fffcf7;
}

.confirmBox {
    background-color: #fff5c9;
    border: 1px solid #ffe29d;
}

.btnCustom {
    border: none;
    background-repeat: no-repeat;
    width: 90px;
    height: 22px;
    font-family: "Segoe UI",​Arial,​Helvetica,​sans-serif;
    font-size: 12px;
    background-color: transparent;
}

.btnDefault {
    background-image: url("/Images/sprites/btn_Default_90_sprites.png");
}

    .btnDefault:active {
        background-position: 0px -44px !important;
    }

    .btnDefault:hover {
        background-position: 0px -22px;
    }

.lightRedGradientBox {
    background: #fffefe; /* Old browsers */
    background: -moz-linear-gradient(top, #fffefe 0%, #ffd7d7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffefe), color-stop(100%,#ffd7d7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fffefe 0%,#ffd7d7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fffefe 0%,#ffd7d7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fffefe 0%,#ffd7d7 100%); /* IE10+ */
    background: linear-gradient(to bottom, #fffefe 0%,#ffd7d7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffefe', endColorstr='#ffd7d7',GradientType=0 ); /* IE6-9 */
    border: 1px solid #ffafaf;
}

.paddedCellCenter {
    padding: 10px;
    text-align: center;
}

a {
    outline: none;
    color: #3d6aff;
}

/*
a[id$="moreInfoLink"], a[id$="lbHowCosts"] 
{
    color: #3d6aff !important;
    white-space: nowrap;
}

*/

/* Schedule Operation */
.popup .frequencyType { display:none; width: 60%; box-sizing: border-box; padding-left: 25px; }
.popup .frequencyType .chkHorizontal { width: 100%; }
    .popup .frequencyType table.chkHorizontal td { white-space: nowrap; height: 15px; line-height: 15px;}
.popup #rdoFrequencyType { border-spacing: 5px; border-collapse: separate; }
 

/* STEP */
.step-container,
.step-container > div {
        display: inline-block;
        vertical-align: middle;
}

.step-container {
    margin-bottom: 10px;
}

    .step-container .step {
        font-family: Lato;
        font-weight: bold;
        background-color: #FFF;
        border: 1px solid #333;
        color: #333;
        text-align: center;
    }

    .step-container .stepLabel {
        font-family: Karla;
        font-size: 12px;
        font-style: italic;
        color: #666666;
        color: var(--brownish-grey);
    }

    .step-container.small .step {
        font-size: 8px;
        line-height: 16px;
        color: #0099cc;
        color: var(--cerulean);
        border: 1px solid #0099cc;
        border: 1px solid var(--cerulean);
        height: 18px;
        width: 18px;
        border-radius: 9px;
    }

    .step-container.small .stepLabel {
        font-family: Karla;
        font-size: 12px;
        font-style: italic;
        color: #666666;
        color: var(--brownish-grey);
    }

/* Input15 */
input.input15[type=text],
input.input15[type=password],
textarea.input15 {
    box-sizing: border-box;
    padding: 0 5px;
    background-color: #fff;
    border: solid 1px #dad9d6;
    border-radius: 2px !important;
    height: 30px;
    width: 100%;
    color: #222;
    font-size: 16px;
    font-weight: bold;
    padding: 0 5px;
}

input.input15[type=text], textarea.input15 { font-family: Karla !important; }