/**
 * Style Guide... style from https://cssguidelin.es/
 */

/*#region -------------------------------*\
	#FONTS
\*---------------------------------------*/

.robotoLight	{ font-weight: 300; }
.robotoRegular	{ font-weight: 400; }
.robotoBold		{ font-weight: 700; }
.fontSize14		{ font-size: 14px; }
.fontSize16		{ font-size: 16px; }

/*#endregion #FONTS*/



/*#region -------------------------------*\
	#MARGINS
\*---------------------------------------*/

.marginTop10	{ margin-top: 10px; }
.marginRight10	{ margin-right: 10px; }
.marginBottom10 { margin-bottom: 10px; }
.marginLeft10	{ margin-left: 10px; }
.marginTop15	{ margin-top: 15px; }
.marginRight15	{ margin-right: 15px; }
.marginBottom15 { margin-bottom: 15px; }
.marginLeft15	{ margin-left: 15px; }
.marginTop20	{ margin-top: 20px; }
.marginRight20	{ margin-right: 20px; }
.marginBottom20 { margin-bottom: 20px; }
.marginLeft20	{ margin-left: 20px; }
.marginTop25	{ margin-top: 25px; }
.marginRight25	{ margin-right: 25px; }
.marginBottom25 { margin-bottom: 25px; }
.marginLeft25	{ margin-left: 25px; }
.marginAuto		{ margin: auto; }
.noMargin		{ margin: 0; }

/*#endregion #MARGINS*/



/*#region -------------------------------*\
	#GENERAL
\*---------------------------------------*/

@supports(position:sticky) {
  .sgStickToTop {
    position: -webkit-sticky;
    position: sticky;
    top: 56px;
    /* margin-top: -20px; */
    z-index: 10;
  }
}

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
}

.clickable {
  cursor: pointer;
}

/*#endregion #GENERAL*/



/*#region -------------------------------*\
	#SEARCH
\*---------------------------------------*/

/*
 * Use .sgInputFilterContainer to wrap .sgInputFilter and .sgInputFilterIcon/.sgClearFilterIcon
 */

.sgInputFilterContainer {
  position: relative;
  display: inline-block;
}

.sgInputFilter {
  height: 28px;
  width: 320px;
  padding-left: 8px;
  box-sizing: border-box;
  font-size: 14px;
}

.sgInputFilter.narrow {
  width: 200px;
}

.sgInputFilter.fullWidth {
  width: 100%;
}

  .sgInputFilter::-ms-clear {
	display: none;
  }

  input.sgInputFilter {
	font-style: normal;
	color: #353a40;
  }

  input.sgInputFilter::-moz-placeholder,
  input.sgInputFilter::-webkit-input-placeholder,
  input.sgInputFilter::-moz-placeholder,
  input.sgInputFilter::-ms-input-placeholder {
    color: #A8AFB9;
  }

.sgInputFilter.rounded {
  border: 1px solid #ccc;
  border-radius: 4px;
}
.sgInputFilter.rounded:focus {
  outline: none;
}

.sgInputFilterIcon {
  background-image: url(Images/CoreTheme/MessagingAdmin/SearchGray-8.png);
  background-position: center center;
  background-repeat: no-repeat;
  width: 24px;
  height: 22px;
  position: absolute;
  top: 3px;
  right: 8px;
}

.sgInputFilterIcon.small {
  width: 16px;
  height: 16px;
  background-size: 16px;
  margin-top: 3px;
}

  .sgInputFilterIcon:focus {
    outline: 0;
  }

.sgClearFilterIcon {
  background-image: url(Images/CoreTheme/CloseIcon.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 14px;
  height: 22px;
  position: absolute;
  top: 3px;
  right: 10px;
  cursor: pointer;
}

.sgClearFilterIcon.small {
  width: 16px;
  height: 16px;
  background-size: 16px;
  margin-top: 3px;
}

/*#endregion #SEARCH*/



/*#region -------------------------------*\
	#TEXT BOX
\*---------------------------------------*/

/*
  * Don't forget to set the input type! Without it, text inputs may suffer from sporadic top-line-disappear-itis!
  * <input type="text" class="sgInputBox">
  */

.sgInputBox {
  height: 24px;
  min-width: 280px;
  margin: 4px 0px;
  box-sizing: border-box;
}

.sgInputBox.multiLine {
  height: auto;
}

input[type=text].sgInputBox {
  height: 100%;
  width: 100%;
  border: 1px solid #A8AFB9;
  overflow-y: scroll;
  padding: 0px 7px;
}

input.sgInputBox::-moz-placeholder,
input.sgInputBox::-webkit-input-placeholder,
input.sgInputBox::-moz-placeholder,
input.sgInputBox::-ms-input-placeholder {
  color: #A8AFB9;
}

textarea.sgInputBox {
  height: 100%;
  width: 100%;
  border: 1px solid #A8AFB9;
  resize: none;
  min-height: 96px;
  padding: 7px;
}

textarea.sgInputBox::-moz-placeholder,
textarea.sgInputBox::-webkit-input-placeholder,
textarea.sgInputBox::-moz-placeholder,
textarea.sgInputBox::-ms-input-placeholder {
  color: #A8AFB9;
}

/*#endregion*/



/*#region -------------------------------*\
	#COMBO BOX
\*---------------------------------------*/

.sgComboBox {
  height: 24px;
  min-width: 280px;
  margin: 4px 0px;
  box-sizing: border-box;
}

input.sgComboBox {
  height: 100%;
  width: 100%;
  border: 1px solid #A8AFB9;
  padding: 0px 7px;
}

textarea.sgComboBox::-moz-placeholder,
textarea.sgComboBox::-webkit-input-placeholder,
textarea.sgComboBox::-moz-placeholder,
textarea.sgComboBox::-ms-input-placeholder {
  color: #A8AFB9;
}

/*#endregion*/



/*#region -------------------------------*\
	#ACTION BUTTONS
\*---------------------------------------*/

.sgEditBtn {
  background-image: url(Images/CoreTheme/edit-grey.svg);
  background-position: center center;
  background-repeat: no-repeat;
  width: 20px;
  height: 22px;
  display: inline-block;
  cursor: pointer;
}

  .sgEditBtn:hover {
    background-image: url(Images/CoreTheme/edit-grey_hover.svg);
  }

.sgEditBtnDisabled {
  background-image: url(Images/CoreTheme/edit-grey-disabled.svg);
  background-position: center center;
  background-repeat: no-repeat;
  width: 20px;
  height: 22px;
  display: inline-block;
  cursor: default;
}

  .sgEditBtn.sgWhiteEditIcon {
	/*background-image: url(Images/CoreTheme/MessagingAdmin/EditWhite.png);*/
	background-image: url(Images/CoreTheme/edit_white.svg);
	width: 18px;
	height: 18px;
	/*background-size: contain;*/
  }

.sgCopyBtn {
  background-image: url(Images/CoreTheme/copy-grey.svg);
  background-position: center center;
  background-repeat: no-repeat;
  width: 20px;
  height: 22px;
  display: inline-block;
  cursor: pointer;
}

  .sgCopyBtn:hover {
    background-image: url(Images/CoreTheme/copy-grey_hover.svg);
  }

.sgCopyBtnDisabled {
  background-image: url(Images/CoreTheme/copy-grey-disabled.svg);
  background-position: center center;
  background-repeat: no-repeat;
  width: 20px;
  height: 22px;
  display: inline-block;
  cursor: default;
}

  .sgCopyBtn.sgWhiteCopyIcon {
    background-image: url(Images/CoreTheme/copy_white.svg);
	width: 18px;
	height: 18px
  }

.sgDeleteBtn {
  background-image: url(Images/CoreTheme/trash-grey.svg);
  background-position: center center;
  background-repeat: no-repeat;
  width: 20px;
  height: 22px;
  display: inline-block;
  cursor: pointer;
}

  .sgDeleteBtn:hover {
    background-image: url(Images/CoreTheme/trash-grey_hover.svg);
  }

.sgDeleteBtnDisabled {
  background-image: url(Images/CoreTheme/trash-grey-disabled.svg);
  background-position: center center;
  background-repeat: no-repeat;
  width: 20px;
  height: 22px;
  display: inline-block;
  cursor: default;
}

  .sgDeleteBtn.sgWhiteDeleteIcon {
	background-image: url(Images/CoreTheme/trash_white.svg);
	width: 18px;
	height: 18px
  }

.sgSettingsBtn {
  background-image: url(Images/CoreTheme/edit-grey.png);
  background-position: center center;
  background-repeat: no-repeat;
  width: 20px;
  height: 22px;
  display: inline-block;
  cursor: pointer;
}

  .sgSettingsBtn.sgWhiteEditIcon {
	background-image: url(Images/CoreTheme/settings_white.svg);
	width: 18px;
	height: 18px;
  }

.sgCheckCircleBtn {
  background-image: url(Images/CoreTheme/check_circle_white.svg);
  background-position: center center;
  background-repeat: no-repeat;
  width: 20px;
  height: 22px;
  display: inline-block;
  cursor: pointer;
}

  .sgCheckCircleBtn:hover {
	background-image: url(Images/CoreTheme/check_circle_white.svg);
  }

  .sgCheckCircleBtn.sgWhiteCheckCircleIcon {
	background-image: url(Images/CoreTheme/check_circle_white.svg);
	width: 18px;
	height: 18px;
  }

.sgPlayBtn {
  background-image: url(Images/CoreTheme/play-grey.svg);
  background-position: center center;
  background-repeat: no-repeat;
  width: 20px;
  height: 22px;
  display: inline-block;
  cursor: pointer;
}

  .sgPlayBtn:hover {
    background-image: url(Images/CoreTheme/play-grey_hover.svg);
  }

.sgPlayBtnDisabled {
  background-image: url(Images/CoreTheme/play-grey-disabled.svg);
  background-position: center center;
  background-repeat: no-repeat;
  width: 20px;
  height: 22px;
  display: inline-block;
  cursor: default;
}

.sgCancelBtn {
  font-size: 16px;
  padding-top: 3px;
  padding-bottom: 2px;
  text-decoration: underline;
  color: #666767;
  cursor: pointer;
  margin-top: auto;
  margin-bottom: auto;
  height: 32px; /*IE requires an explicit height for auto margin to work properly*/
}

  .sgCancelBtn:hover {
    color: #BE2025;
  }

.sgStdBtnPrm {
  border: 1px solid #0067A4;
  border-radius: 4px;
  height: 32px;
  min-width: 98px;
  margin: auto 12px auto 12px;
  background-color: #007CBE;
  box-shadow: none;
  transition: box-shadow ease 0.1s;
  cursor: pointer;
  padding: 4px 8px 0px 8px;
  font-size: 16px;
  display: inline-block;
  text-align: center;
  color: #FFFFFF;
  user-select: none;
}

  .sgStdBtnPrm:hover {
    background-color: #298FD8;
  }

.sgStdBtnSec {
  border: 1px solid #0078AC;
  border-radius: 4px;
  height: 32px;
  min-width: 80px;
  margin: auto 12px auto 12px;
  background-color: #FFFFFF;
  box-shadow: none;
  transition: box-shadow ease 0.1s;
  cursor: pointer;
  padding: 4px 8px 0px 8px;
  font-size: 16px;
  display: inline-block;
  text-align: center;
  color: #0078AC;
  user-select: none;
}

  .sgStdBtnSec:hover {
    border-color: #249EDD;
    color: #249EDD;
  }

.sgStdBtnDisabled {
  border: 1px solid #D2D6DB;
  border-radius: 4px;
  height: 32px;
  min-width: 80px;
  margin: auto 12px auto 12px;
  background-color: #D2D6DB;
  box-shadow: none;
  transition: box-shadow ease 0.1s;
  cursor: default;
  padding: 4px 8px 0px 8px;
  font-size: 16px;
  display: inline-block;
  text-align: center;
  color: #EEF0F2;
  user-select: none;
}

.sgStdBtnDisabled:focus {
  outline: none;
}

.sgCloseBtn {
  height: 26px;
  width: 26px;
}

.sgCloseBtnImg {
  background-image: url(Images/CoreTheme/CloseNoPad.png);
  height: 19px;
  width: 19px;
  margin-top: 3px;
  margin-left: 3px;
  cursor: pointer;
  outline: none;
}

  .sgCloseBtnImg:hover {
    background-image: url(Images/CoreTheme/CloseIcon.png);
    height: 26px;
    width: 26px;
    margin-top: 0px;
    margin-left: 0px;
  }

.sgAddBtnFloating
{
  position: absolute;
  right: 100px;
  top: 37px;
  background-image: url(Images/CoreTheme/LargeFloatingAdd.png);
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 57px;
  width: 57px;
}
.sgAddBtnFloating:hover 
{
  right: 95px;
  background-image: url(Images/CoreTheme/LargeFloatingAddHover.png);	
  height: 62px;
  width: 62px;
}
.sgAddBtnFloating:focus {
  outline: none;
}

/*#endregion #ACTION BUTTONS*/



/*#region -------------------------------*\
	#TOGGLE CHECKBOX
\*---------------------------------------*/

.sgCustomChkInput {
  display: none !important;
}

.sgCustomCheckbox {
  width: 26px;
  height: 16px;
  position: relative;
}

  .sgCustomCheckbox label {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 3px;
    z-index: 1;
    left: 5px;
    background: #BD2026;
    margin: 0;
  }

  .sgCustomCheckbox div {
    width: 100%;
    height: 100%;
    position: relative;
    border: 1px solid #BD2026;
    border-radius: 50px;
  }

  .sgCustomCheckbox input[type=checkbox]:checked ~ div {
    border-color: #3D9349;
  }

  .sgCustomCheckbox input[type=checkbox]:checked + label {
    left: 11px;
    background: #3D9349;
  }

  .sgCustomCheckbox input[type=checkbox]:disabled ~ div {
    border-color: #808080;
  }

  .sgCustomCheckbox input[type=checkbox]:disabled + label {
    left: 11px;
    background: #808080;
  }

.sgTrueTextColor {
  color: #3D9349;
}

.sgFalseTextColor {
  color: #BD2026;
}

.sgDisabledTextColor {
  color: #808080;
}
/*#endregion TOGGLE CHECKBOX*/



/*#region -------------------------------*\
	#FORM CONTROL CLASSES
\*---------------------------------------*/

.sgFormHeader {
  margin-left: 24px;
  margin-right: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid #D2D6DB;
  justify-content: space-between;
}

  .sgFormHeader td {
    padding-left: 16px;
    border-bottom: 1px solid #D2D6DB;
  }

.sgFormTitle {
  font-size: 20px;
  font-weight: bold;
  color: #25282D;
  margin-left: 16px;
}

.sgFormModified {
  color: #BD2026;
}

.sgFormScore {
  font-size: 16px;
  color: #25282D;
  margin-right: 16px;
}

.sgFormMain {
  margin-left: 24px;
  margin-right: 24px;
  height: 100%;
}

.sgFormQuestionGroup {
  margin-left: 16px;
  margin-right: 16px;
}

  .sgFormQuestionGroup td {
    padding: 24px 0px 16px 16px;
  }

.sgFormQuestionGroupName {
  font-size: 14px;
  color: #0078AC;
  font-weight: bold;
  margin-top: 24px;
  margin-bottom: 16px;
}

.sgFormQuestion {
  font-size: 14px;
  margin-bottom: 32px;
}

  .sgFormQuestion td {
    padding-bottom: 16px;
    padding-left: 16px;
  }

  .sgFormQuestion input[type=radio] {
    margin-bottom: 12px;
    margin-left: 16px;
    position: relative;
    top: 2px;
  }

.sgFormTextInput {
  background-color: #FCFDFD;
  border: 1px solid #666667;
  outline: none;
  width: 608px;
  height: 112px;
  overflow: hidden;
  resize: none;
  overflow-y: scroll;
}

.sgFormSelectInput {
  width: 608px;
  padding-left: 8px;
  padding-right: 8px;
  height: 24px;
}

.sgFormCheckInput input {
  position: relative;
  top: 2px;
}
/*#endregion FORM CONTROL CLASSES*/



/*#region -------------------------------*\
	#SORT ARROWS
\*---------------------------------------*/

/** 
 * Usage: After your text:
 *   <div class="sgSortArrows">
 *       <div class="sgUpArrow"></div>
 *       <div class="sgDownArrow"></div>
 *   </div>
 *   
 * Then, to toggle the arrows, conditionally (hint: ng-class) apply the 
 * following classes to the arrow divs (sgUpArrow/sgDownArrow).
 * -Up Arrow-
 * sgSelectUpArrow - Replaces light-grey with dark-grey up arrow.
 * sgHideUpArrow - Hides the up arrow completely.
 *
 * -Down Arrow-
 * sgSelectDownArrow - Replaces light-grey with dark-grey down arrow.
 * sgHideDownArrow - Hides the down arrow completely.
 *
 * --Example: Column sorted to descending--
 * <div class="sgSortArrows">
 *	  <div class="sgUpArrow sgHideUpArrow"></div>
 *	  <div class="sgDownArrow sgSelectDownArrow"></div>
 * </div>
 */

.sgSortArrows {
  display: inline-block;
  cursor: pointer;
  visibility: visible;
  margin-left: 8px;
}

  /* Up Arrow (base, hide, select) */
  .sgSortArrows .sgUpArrow {
    background: url(Images/CoreTheme/sort_normal.png);
    display: block;
    width: 10px;
    height: 6px;
    margin-bottom: 4px;
  }

    .sgSortArrows .sgUpArrow.sgSelectUpArrow {
      background: url(Images/CoreTheme/sort_selected.png);
    }

    .sgSortArrows .sgUpArrow.sgHideUpArrow {
      visibility: hidden;
      margin-bottom: 0px;
    }

  /* Down Arrow (base, hide, select) */
  .sgSortArrows .sgDownArrow {
    background: url(Images/CoreTheme/sort_normal.png);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    display: block;
    width: 10px;
    height: 6px;
  }

    .sgSortArrows .sgDownArrow.sgHideDownArrow {
      visibility: hidden;
      margin-bottom: 0px;
    }

    .sgSortArrows .sgDownArrow.sgSelectDownArrow {
      background: url(Images/CoreTheme/sort_selected.png);
    }

  /* Hovers */
  .sgSortArrows.hover .sgUpArrow,
  .sgSortArrows.hover .sgDownArrow,
  .sgSortArrows:hover .sgUpArrow,
  .sgSortArrows:hover .sgDownArrow,
  .sgUpArrow:hover,
  .sgDownArrow:hover {
    background: url(Images/CoreTheme/sort_selected.png);
  }
/*#endregion SORT ARROWS*/



/*#region -------------------------------*\
	#DATE AND TIME PICKERS
\*---------------------------------------*/

/** 
 * Usage: 
 *   <div class="sgFormDateTimePicker">
 *       <div class="sgFormDateTimePickerText"></div>
 *       <div class="sgFormDateTimePickerIconsArea">
 *           <div class="sgFormDateTimePickerIcon"></div>
 *           <div class="sgFormDateTimePickerIcon time"></div>
 *       </div>
 *   </div>
 * 
 * Place the data binding for the selected date and time here in the .sgFormDateTimePickerText div.
 * You may also use the placeholder class on an ng-class when placeholder text is needed.
 * Place the click event for the date picker on the .sgFormDateTimePickerIcon div.
 * Place the click event for the time picker on the .sgFormDateTimePickerIcon.time div.
 * (The time icon is optional. Remove if no time picker is needed.)
 * 
 */
.sgFormDateTimePicker {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1 1 auto;
  background: white;
  align-items: center;
  padding-left: 5px;
  width: 180px;
  border: 1px solid #A8AFB9;
  margin: 0px 4px;
  height: 26px;
}

.sgFormDateTimePickerText {
  
}

.sgFormDateTimePickerText.placeholder {
  color: #A8AFB9;
  font-style: italic;
}

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

.sgFormDateTimePickerIcon {
  background-image: url(../Standard/Images/CoreTheme/StyleGuide/date_light.svg);
  height: 24px;
  width: 28px;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0px 2px;
  background-color: #E9EAEE;
  transition: all 0.2s ease-out;
}

.sgFormDateTimePickerIcon:hover {
  background-image: url(../Standard/Images/CoreTheme/StyleGuide/date_dark.svg);
  /*background-color: #d2d6db;*/
  cursor: pointer;
}

.sgFormDateTimePickerIcon.time {
  background-image: url(../Standard/Images/CoreTheme/StyleGuide/time_light.svg);
}

.sgFormDateTimePickerIcon.time:hover {
  background-image: url(../Standard/Images/CoreTheme/StyleGuide/time_dark.svg);
}

.sgFormDateTimePickerDivider {
  margin: 0px 2px;
  height: 16px;
  width: 0px;
  border-right: 1px solid #A8AFB9;
}
/*#endregion DATE AND TIME PICKERS*/